Topic: CSS inline vs block

Hey guys,

I'm setting up what I think is a fairly straightforward layout using css but I'm having some problems putting inline elements into a block element.

My goal is to have a container div that has a certain background color (different from the body background), to include some (inline) divs in the container and to have the container adjust its height to the content automatically. Here's what I tried to do:

<div style="width: 800px; background: #def; margin: 0px auto;">
  <div style="width: 200px; float: left;">
  <div style="width: 600px; float: left;">

But this seems to crop the container to a height of 0px, because it doesn't take the inline (float) elements into account. I can 'fix' it by making the container an inline element as well but that breaks the rest of my layout, i.e. having the container centered.

Any thoughts on how to get around this?

Re: CSS inline vs block

This is an unfortunate problem with current CSS. Floating elements take up zero space in their containing div, so if all elements are floating, the containing div collapses to nothing, as you see.

From what I have read, the best solution is to put in an element that does a "clear: both" that will force all floating elements above it to clear and take their place in the layout. The book I rely heavily on recommends you float as long as you can and only do the full clear at the last minute possible, typically in the footer div at the bottom of the page.

I find I can rarely do that though. I added this selector to my css (fc stands for 'full clear')

.fc {
   clear: both;

Then what I do is the last element in the container I add that class to (remember an element can have more than one class applied to it). Or if that is not possible, then I will add "<div class='fc'></div>". Which I don't like to do but sometimes it is necessary.

Re: CSS inline vs block

Very nice, it works perfectly!

I'll agree it's not the neatest solution ever but far from the worst css hack I've ever used wink