Comments on: short content is breaking my template!

Question: short content is breaking my template!

mcsweetie — Sun, 25 Sep 2005 09:59:53 -0800

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?

By: o2b

o2b — Sun, 25 Sep 2005 10:01:26 -0800

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.

By: o2b

o2b — Sun, 25 Sep 2005 10:06:39 -0800

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.

By: signal

signal — Sun, 25 Sep 2005 10:07:26 -0800

Well known issue. This should point you in the right direction.

By: o2b

o2b — Sun, 25 Sep 2005 10:07:31 -0800

Sorry, my "containers" are your "content". I didn't see that.

By: o2b

o2b — Sun, 25 Sep 2005 10:09:11 -0800

Whoa -- I'd totally forgotten about the overflow:auto trick.

By: mcsweetie

mcsweetie — Sun, 25 Sep 2005 11:21:00 -0800

great! thanks for you help, guys.