Floated Divs dont expand centered div in firefox

[mikka23]

Okay basically I have a wrapper div which holds everything and centers it. It has borders left and right which are supposed to go all the way down the page. My problems is my main content is two floated divs inside a main div. These floated divs dont expand the wrapper div in firefox so the borders don't go all the way down. How in firefox do I get the wrapper to expand all the way down to hold the floated contents?

I am using margin:0 auto for centering and for floated am using floatxx, position:relative; I get this problem a lot so all help is appreciated.

[Ryan Fait]

Sounds like you need to put a clearing div underneath the two floating items.

Code: Select all

.clear {
    width: 100%;
    height: 1px;
    margin: 0 0 -1px;
    clear: both;
}

Place <div class="clear"></div> after the <div> of the last floated element in the wrapper.


Visit here for more info:
http://ryanfait.com/articles/2006/10...ng-css-floats/

[mikka23]

Thanks that will really come in handy. Would really like some articles like that for my new site.

[Ryan Fait]

I really need to write some more. I was doing good for a while there.

[Rob]

Originally Posted by ryanfait

I really need to write some more. I was doing good for a while there.

Could use some on here too!!

Will be adding a feature for that as soon as I work out the specifics.

[Ryan Fait]

Cool. I'm writing a sticky footer example now. It's quite nice because there are no hacks involved, but there's one minor bug I can't work out. I'll get there soon, though

[moojoo]

One way to simulate the effect of 100% height is with a background image on the body {} so you could put your border etc on that graphic and place your divs accordingly.

something like: background: #FFF url("foo.jpg") repeat-y center top;

Hope that makes sense. As for sticking a footer at the bottom of the page, there are examples of that but its not the "easiest" thing in the world to get right.

[Ryan Fait]

Yeah, I've seen many examples, but mine is going to be better (if I start working on it again, soon).