Welcome to WebmasterWorld Guest from 54.90.204.233

Forum Moderators: not2easy

Message Too Old, No Replies

The stretching DIV problem

:after pseudo element :: clear floats using CSS

     
8:22 pm on Aug 25, 2003 (gmt 0)

New User

10+ Year Member

joined:Aug 16, 2003
posts:23
votes: 0


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>
11:20 pm on Aug 25, 2003 (gmt 0)

New User

10+ Year Member

joined:Aug 16, 2003
posts:23
votes: 0


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

2:07 am on Aug 26, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 26, 2003
posts:881
votes: 0


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

11:02 am on Aug 26, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


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

2:28 pm on Aug 26, 2003 (gmt 0)

New User

10+ Year Member

joined:Aug 16, 2003
posts:23
votes: 0


Awesome! Thanks =D
2:36 pm on Aug 26, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 26, 2003
posts:881
votes: 0


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

Jordan