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:

Messy paragraphs http://img.skitch.com/20100801-dcb4x7uw41gkn48x1fdahys994.jpg.

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

Use the clear property on the text_block class:

.text_block { clear: both; }