CSS layout issue, elements mount together


#1

Someone showed me these code. There are a few weird places but I just want to know why the logo image and the navigation area mount together? Could anyone help please?

I’ve tried to change a few weird places but it seems that they are not the cause.

Top is what is going on now, bottom is what we want to eventually achieve:

Below is the original code she sent to me:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>

    <style type="text/css">
	*{
	margin:0;}
	
	.header {
	width: 100%;
	height: 140px;
	background-color: #FFF3CA;
	margin-left: auto;
	margin-right: auto;
}
.header .logo {
	width: 180px;
	height: 50px;
	margin-left: auto;
	margin-right: auto;
}
.header .nav {
	width: 480px;
	height: 27px;
	background-color: #E0FFB7;
	margin-left: auto;
	margin-right: auto;
}
</style>
    
</head>

<body>
<div class="header">
  
  <div class="logo"><a href="#"><img src="img/main-logo.png" width="185" alt=""/></a></div>
  
  <div class="nav">
	
  </div>

</div>


</body>
    
</html>

#2

the images are local, so when putting code in a bin, the image doesn’t show. Please provide a working example (with working image)


#3

i put a border around the image:

Screenshot_2017-09-16_17-04-12

and the navigation menu is below the image, but the image look to have more height (in screenshot) so the problem seems to be a lack of space for the image and navigation to sit below each other.


#4

The logo image: main-logo

Thank you, I just saw your answer going to have a look now.


#5

Yep, just changed the height of logo to auto, and it works fine now. Cheers.


#6

or the parent element (<div class="header"></div>) should have more height, either way, that was the problem, good you solved it :slight_smile: