Problem Positioning These Blocks In Css

I am trying to achieve this-> (Black box is a signup/login section, blue is a nav bar, red is a header area with some text content) I am trying to get to that outcome with this

Solution 1:

Add clear:both to your navigation block

#nwtBox#navigation {
  float: left;
  padding: 35px000;
  clear:both;
}

Solution 2:

Floats will not interfere with relatively placed elements; content will just flow around the float. As you have both the navigation and the login box as floats, they're not affecting the positioning of the content div. If you want to leave things simple, you can simply give the content div a top margin equal to loginHeight + loginTopMargin + navHeight + navTopMargin and you'll be OK.

Solution 3:

Try this:

#nwtBox#navigation {
  clear: both;
  //remove float: left;
  padding: 35px000;
}

If you want to keep float: left in #navigation, you can add a div with style clear: both into HTML code.

<divid="signupLogin>
...
</div>

<div style="clear:both"></div><divid="navigation">
...