Divs with floating image not lining up corrently

Question

I put together a simple system so that my dad can manage a website for his club volleyball team. He's not very familiar with html markups so I'm trying to keep this as simple as possible for him. Here is what I have him right now:

<div class="text_block">
    <h2>section heading</h2>
    <image src="" />  <- optional image
    <p> </p>
    <p></p> 
    <p></p> 
    <p></p> 
</div>

with the following css rules:

.text_block {
padding : 1em 0;
min-height : 300px;
}
.text_block img {
float : left;
padding : 0 25px 15px 0;
}
.text_block p {
text-align : justify;
padding : 0 1.5em;
}

without the min-height declaration on the wrapper div I get messes like this:

.

since some of the images don't have much text in their div wrap.

When I DO include the min-height element we get big gaps where there are small paragraphs and no images. Worst case scenario I could have him tag the "text_block" divs as "text_block has_image" for those with images, but I would like to keep this as simple as possible.

Can anyone help me out with this? It would be greatly appreciated.

Answer 1

Your .text_block isn't clearing the floats, set overflow:hidden; zoom:1; and remove the min height. That should set you straight.

You can alternatively set clear:both; so it clears the floats above. The reason why I'd go with the former is because when you inspect the element, since it's clearing itself the dimensions/bordering by the inspecting tool ( Firebug and such ) will look "right." Of course visually it doesn't really matter but I like it that way.

Answer 2

Use the clear property on the text_block class:

.text_block { clear: both; }

Answer 3

The problem is that since your container div is not floated, it is being pushed over by the image when the p tags don't take up enough space.

You could float the container divs as well to make everything stay inside (though this might give you some issues with whatever contains your container divs)

The other option would be to add some kind of clearing div at the end of each container

div.clear {
  float:none;
  clear:both;
  }