The stretching DIV problem

:after pseudo element :: clear floats using CSS

[fungku]

One of the problems I had on my last site design (and one of the reasons I gave that one up), is back to haunt me again.

I have DIVs inside a large containing one, I want them to stretch the large one when these ones get bigger but it's not working in Mozilla (it's weird to have my page working in IE and not Mozilla, it's usually the other way around).

I've been searching google and reading all over the place for what could be a solution, and after trying many things, I am left with this(which doesn't work):

#main-bottom {
position: relative;
left:0px;
top: 0px;
width: 800px;
min-height: 100%;
background-image: url('../images/body_bg.gif');
background-repeat: repeat-x;
border-left: 1px solid;
border-right: 1px solid;
background-color: #fff;
margin-left: auto;
margin-right: auto;
}
html>body #main-bottom { height: auto; }
div.yabb-news {
float: left;
width: 365px;
padding-top: 30px;
padding-left: 20px;
}
#bigbox-container {
float: right;
width: 365px;
padding-top: 30px;
padding-right: 20px;
margin-left: -20px;
margin-bottom: -30px;
}

<div id="main-bottom">
<div class="yabb-news">
  ...a bunch of stuff....
</div>
<div id="bigbox-container">
...a bunch of other stuff...
</div>
</div>

[fungku]

Well, the only answer I could come up with was a table, and it worked.
I guess I'll wait until CSS is fully compatibel/functional/practical before I completely write off tables.

Thanks anyway =P

[MonkeeSage]

fungku:

I think the only way to make the container stretch with the content is not to specify a size on it, but that's not always a viable solution...I'm hoping for something like a "grow" attribute like the overflow attribute or something like that. Mabye in CSS3? I'm keeping my fingers crossed. :)

Jordan

[SuzyUK]

Moz is exhibiting the correct behaviour. Floated elements are not in the flow [w3.org] of the document so the parent element doesn't even know it's got any children ;)

The most common way to workaround this previously was to use a "spacer" div:
<div style="clear: both;"></div>
and this needed to be inserted in the HTML before closing the containing div.

However, there is another way to make a parent element "stretch" to contain its floated children elements using CSS only, which to me makes things much neater..

It uses the :after pseudo-element [w3.org] selector to produce "generated content", then clears this "content" using clear: both; (Note: Moz actually requires something in this content field, hence the need to specify line-height and font-size to "hide it" again.)

see this example:
CSS:

#container {
position: relative; /* required by NN */
width: 700px;
border: 1px solid #000;
background: #ffe;
margin:0 auto;
padding: 20px;
}

/* the workaround */
/* moz 1.4 requires something in the content field */
#container:after{
content: "."; display: block; line-height: 1px; font-size: 1px; clear: both;}

.leftfloat {
float: left;
width: 350px;
background: #cff;
}

.rightfloat {
float: right;
width: 350px;
background: #cfc;
}

HTML:

<div id="container">
<div class="leftfloat">...left floated div....</div>
<div class="rightfloat">...right floated div...</div>
</div>

IE doesn't support the :after pseudo-element but then it doesn't have to it does what you want (wrongly) anyway!

This should work with your code above fungku..

Suzy

[fungku]

Awesome! Thanks =D

[MonkeeSage]

*MonkeeSage sends fungku a T-shirt like his that reads "Everything I ever wanted to know about CSS, I learned from SuzyUK"* ;)

Jordan