0

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!

2
Contributors
2
Replies
3
Views
4 Years
Discussion Span
Last Post by JorgeM
0

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

1

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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.