short content is breaking my template!

September 25, 2005 9:59 AM

Simple CSS question. I'm fooling around with the template for a wiki and, well, this is what's happening.

here's the css for the content DIV:

.content {
width: 90%;
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
border-top: 1px solid black;
padding: 10px 10px 10px 10px;
background-color: white;
margin-bottom: 10px;
padding-left: 20px;
padding-right: 20px
}

The image itself is inside of the DIV and doesn't have any style applied to it. Any ideas?

posted by mcsweetie to computers & internet (6 comments total)

Are you sure the image isn't inheriting a float from somewhere?

That's exactly what I would expect to see if the image was floated, but the content wasn't as tall as the image.
posted by o2b at 10:01 AM on September 25, 2005

I didn't offer a solution: there are a couple.

First, if your images are going to be a consistent and predictable height, set a min-height on the container. IE doesn't obey the min-height though, so you'll need to give it a height too (but just for IE). My CSS would look like this:

div.container {min-height: 100px; _height: 100px;}

If the image is not consistent, I would put a non-semantic clearing element in the contianer, just prior to closing it. My HTML would look like this:

<div class="container">

lorem ipsum

<img src="foo" />

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

Sometimes a BR doesn't cut it, and I have to use a DIV instead.
posted by o2b at 10:06 AM on September 25, 2005

Well known issue. This should point you in the right direction.
posted by signal at 10:07 AM on September 25, 2005

Sorry, my "containers" are your "content". I didn't see that.
posted by o2b at 10:07 AM on September 25, 2005

Whoa -- I'd totally forgotten about the overflow:auto trick.
posted by o2b at 10:09 AM on September 25, 2005

great! thanks for you help, guys.
posted by mcsweetie at 11:21 AM on September 25, 2005