Posted by Ben C on 10/05/06 15:08

On 2006-10-05, 1995 Cobra <mg@deepskystudio.com> wrote:
>
> 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?

Not sure I understand. You have two left floats in a set-width
container, one that's 225px wide, and the other that you want to butt up
against it filling the remaining space?

You will just have to set the width manually-- there's no way to say
"100% - 225px" on a float unless you resort to scripting.

But if you've set the width on the container, it doesn't depend on the
viewport width, so I'm a bit confused.

[Back to original message]