CSS layout problems, floats, nested divs

Question

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 myself. I have floated both that image and the text next to it inside another div and centered that div, which is fine. But in order to start a new paragraph below it, I must put that paragraph within a div because the floats above it need to be cleared(or it displays the text in that right margin next to the div). I am sure there is an easier way of doing what I want to do. If someone might be able to take a look at my code and see where I am going wrong structure wise it would be a great help...thanks a lot.

As you can see, there heading that says "Recent Work" is being centered like it is supposed to but it is not being given the usually margin from that box above it.

Here is the link:

http://danberinger.com/

Answer 1

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.

Answer 2

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

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

Answer 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.