Member Avatar for Malymieczek

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
  • 205 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

Short version: this is a classic float/containment and width-composition problem — was right to flag floats and the missing wrapper end tag, and ’s “image too big” observation is often the visible symptom rather than the root cause. The reliable way to diagnose is to (a) confirm the DOM is properly closed, (b) inspect computed widths/margins/padding in devtools, and (c) test layout with floats temporarily disabled.

Practical checks to run first

  • Make sure the wrapper actually closes. An unclosed parent can reorder layout in unexpected ways (as noted).
  • In the browser inspector, look at the computed width/offsetWidth of the wrapper, the floated logo, and the navigation. Remember that paddings, borders or sibling widths can make the total exceed the wrapper even if individual images look smaller on paper.
  • Add temporary outlines (borders or background colors) to each region to see where each box really sits, and toggle the float on the logo to see how the nav responds.

Three easy fixes

  • Contain floats with a lightweight clearfix:

    .clearfix::after {
  content: "";
  display: table;
  clear: both;
}

    Apply that to the parent wrapper so its background/height includes floated children.

  • Simpler: give the parent a new BFC to contain floats — e.g. overflow: auto; (or hidden) on the parent — but be mindful of scrollbars.

  • Modern approach: remove floats and use flexbox for the header row. That avoids width-summing surprises and centers content cleanly.

Other small, often-overlooked items

  • Remove deprecated align attributes and use img { display:block; max-width:100%; } to avoid inline whitespace and scaling problems.
  • Fix CSS typos (for example text-allign → text-align) and use the proper <!DOCTYPE html> so browsers run in standards mode.

These steps make it straightforward to discover whether the image itself is too large or whether sibling/floats/doctype/typos are causing the misplacement.

Recommended Answers

All 2 Replies

Member Avatar for Malymieczek

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

Member Avatar for JorgeM

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.