CSS layout issues, floats, nested divs

Question

Well, I got some useful information on this personal site that I'm already working on. Somewhere in my messy mess of nested divs, I created some problems for myself. I put both images and text next to it inside another div and centered that div, which is good. But in order to start a new paragraph below, I have to put this paragraph in a div, because the floats above it need to be cleared (or it displays the text in this right box next to the div). I am sure there is an easier way to do what I want to do. If someone can take a look at my code and see where I am mistaken, a wise structure would be a big help ... thanks a lot.

As you can see, the heading that says "Recent Work" is centered, as expected, but it is usually not given the fields from this window above it.

Here's the link:

http://danberinger.com/

Answer 1

The problem is that it intro_containerdoes not occupy the full height of its children. You will get the desired effect by placing the element with a clear style set after 2 sections that you are floating:

<div id="intro_container">

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

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

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

This will give the "Recent Work" a normal fill.

Answer 2

put overflow:hidden;in selector div#intro_containeron 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 describe without needing to mess up your code with additional div elements. http://www.webtoolkit.info/css-clearfix.html Just add the CSS styles and the .clearfix class to any divs that are reset from floating children.