My Layout Breaks

...when I shrink my browser

[Emperor]

Hi guys,

I have a two column layout, the left is a fixed sidebar and the right is liquid, everything works great except when I make the browser small, then everything on the right side ends up all the way on the left below any content in the sidebar.

If I have a banner on the right it breaks at only half the screen width, without the banner the text flows downward but it still breaks sooner than it should.

I want it so that the horizontal scrollbar appears and nothing ends up in the sidebar, how can I do that?

Thanks.

[swa66]

min-width would be an easy solution, were it not that MSIE 6 doesn't honor that (there are some workarounds floating around). Still, take care as you don't know font size people will be (forcefully) using and as such you might have a hard time determining the minimal width needed not to have the content drop down.

Playing with overflow settings might be a possibility as well.

[penders]

Instead of floating your layout you could position:absolute; your 'fixed sidebar' on the left. And then just let your 'liquid right' flow after this, but give it a margin-left equal to (or slightly larger than - if you want a gap) the width of your 'fixed sidebar'.

This is an alternative way of having a liquid 2-column layout (with one column fixed width) and which doesn't suffer from the 'drop down underneath' effect that you can get with floats at narrow browser widths.