Float question

[XaviJr]

Hi guys!

I have a footer with 2 contents, one on the left (float:left) and one on the right (float:right).
The problem is that when the window width is too short, the right content goes under the left content. How can i prevent this from happening? I have to give a min-width? That’s not very adjustable..

[fjorko]

Use this on your selector for each div –

Width:50%;

With this each div will always only be 50% of whatever the wrapping div’s width is set to:

[XaviJr]

that doesn’t work for me. i think i need to set a content width.. here’s what i need to do:

http://img823.imageshack.us/i/40375853.jpg/

[fjorko]

Sorry – what I meant was – if say your wrapping div was 900px, then if you set your two content div’s to 50% each – then even if the wrapping div increases or decreases in width – the content div should only occupy 50% of that width.

At least that’s how i understand it. . . .

[TheLeggett]

fjorko is correct. Unless there is something in the 50% element making the width larger than 50%, this should work.

Here’s a demo: http://theleggett.com/explanations/Float/

[XaviJr]

I understand that fjorko is right, but i want a different behaviour from what i see on your demo. I don’t want to have multiple lines if the browser window is too small, i want to have minimum width.

The problem is that i’m using css sticker footer hack (http://www.cssstickyfooter.com/) and so the footer is outside the wrapper.

[XaviJr]

Visiting http://www.cssstickyfooter.com i found what’s happening to me.
Notice what’s happening to footer background when the browser window is too small in that website? When you scroll it the background disappears on the overflow..

[XaviJr]

I’ve found the solution, here it is if anyone interested: http://www.sitepoint.com/forums/css-53/sticky-footer-revisited-742516.html

[Author]

Posts