Hi all,
Im working on a website, and Im trying to put a navigation bar in the navigation divider I made, however when I put the image in, it doesnt go into the divider, even though its between the <div> tags.
Heres what it looks like:

Heres My code:

CSS:

body{background-color:#030303}
#wrapper {width:800px;
margin:0 auto;
}
#header {background-color:yellow;
text-align:center; 
height:50px;
}
#footer{clear:both; 
background-color:yellow ;
text-allign:center;
}
#logo {float:left;
width: 139px;
background-color: black;
text-align: left;
height:70px;}

#navigation {width: 800px;
background-color:#EDEDED;
height:50px;
}
#sidebar {float:left;padding:20px; background-color:green;text-align:right;width:100px;height:460px;}
#content {float:right;width: 620px;
padding:20px; background-color:gray;
text-align:left; height:500px;
border-color:#0017FF;
}

HTML:

<! DOCTYPE html>
<html>
<head> <title>Website</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div  id="header">
This is my header.
</div>
<div id="logo">
<br/>
<img src="images/SubZer0-logo-and-name.png" width="140" height="50" align="left"></div>
<div  id="navigation">
<img src="images/subzero-banner-new.png" width="750" height="45" align="top">
</div>

<div  id="content">
This is my content box.
</div>
<div  id="sidebar">
This is my sidebar.
</div>
<div  id="footer">
This is my footer.
</div>

</body>
</html>

How Do I fix this?
Thank you!

Recommended Answers

All 2 Replies

Never Mind, I fixed it... Turns out the image was too big for the container.. I dont understand why though, Since the Containter was 800x50 and the image was 750x45

The problem seems to be related to your use of floats. For exmaple, the logo div is set to float left, but the navigation is not. Keep in mind that when you use floats, you take the elements outside of their normal flow. Improper use of the float style will cause all sorts of unexpected results.

In addition, I noticed that you are missing the end </div> tag for your wrapper div.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.