Posted by Ben C on 10/05/06 13:49

On 2006-10-05, 1995 Cobra <mg@deepskystudio.com> wrote:
> Hello all, CSS new guy here. I've been adapting well to this, but have
> hit a snag. My pages look pretty good when the window is fully
> expanded, but if you begin to collapse it or have it sized small (the
> browser window), all the content starts to "stack" itself - making the
> page look aweful. For instance, I float a div to the left and then have
> another div that should display to the right of it. Full window, looks
> great. Start to collapse the window and it puts the div that should be
> to the right below the height floated div (essentially moving it out of
> viewable space and creating a void to the right of what is viewable).
> Here is an example of the code i'm using... any thoughts:

You can give the container the floats are in a width set in pixels. Then
if the viewport is smaller than that, you'll get a horizontal scrollbar,
but the floats won't jump underneath each other.

Alternatively (perhaps preferably as horizontal scrollbars are
unappealing) give the floats percentage widths so they get narrower
together with the viewport.

Floats jumping underneath each other when there isn't enough horizontal
space available is correct behaviour; so however you decide to fix it,
you basically have to make sure there's going to be enough room for them
to fit at the side.

[Back to original message]