Posted by 1995 Cobra on 10/05/06 14:27

Ben C wrote:
> 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.

Wow, good stuff. Setting that width gives me the desired affect with,
of course, one minor challenge. My first floated <div> (the flash) has
a specific width of 225px. The "holder" <div> will vary based on how
big someone's window is, but it's essential that it be the full width,
no more no less, regardless. I can't set it to 100% right, because then
it will still push itself under? Any thoughts?

[Back to original message]