CSS Layout Problems, Floats, Nested Divs

Alright, I have received some helpful information on this personal site I am working on already. Somewhere in my jumbled mess of nested divs I have created some problems for mysel

Solution 1:

put overflow:hidden; into the div#intro_container selector on line 110

to understand why it works read this here: http://csswizardry.com/floats/

Solution 2:

The problem is that intro_container does not take the full height of its children. You will get the desired effect by putting an element with the clear style set after the 2 divs you are floating:

<div id="intro_container">

  <div id="messagebox">
    ...
  </div>

  <div id="picture">
    ...
  </div>

  <div style="clear: both"></div>
</div>

This will give "Recent Work" the normal padding.

Solution 3:

I think CSS clearfix will do exactly what you are describing without needing to taint your code with extra div elements. http://www.webtoolkit.info/css-clearfix.html Just add the CSS styles and the .clearfix class to any divs which are collapsing from floating children.