Can we make a layout fluid only up to a certain point with CSS?

[vcount]

I've been banging my head over this for hours, but then I'm not very good with CSS yet.

What I'm trying to do is make a layout that is fluid for larger resolutions, thereby making the content fill more of the screen, but STOPS BEING FLUID at about say, 600px. As in, you resize the browser, and it keeps resizing fluidly until it's about 600px wide, at which point the dreaded horizontal scrollbar appears.

I don't know if linking to outside sites is allowed, but if you're having trouble envisioning what I'm talking about, you can see it happen at penpalparty dot com if you resize your browser window.

I've looked at the source code for that site, and it's all tables. The thing that is doing it for that site is a transparent gif, it's this line here.

<img src="images/transpixel.gif" alt=
"spacer image" width="500" height="2">

Of course I've tried that, and every variant of that I can think of, in my CSS all div layout. And haven't had any success at all, the only way I can get that dreaded horizontal scrollbar to appear at all is to toast the liquid layout entirely and go to a fixed layout that looks all smooshed up on the left at higher resolutions.

So is there a way to do this with CSS? I sure hope so.

[Setek]

Hi vcount :) Welcome to Webmaster World Forums :)

You aren't allowed to cite URIs like that - it's detailed in the Webmaster World TOS [webmasterworld.com]

Now, about your problem - liquid layout up to a certain point - there's a cool CSS property called

min-width

.

With it, you can set your containing

div

to be, at minimum, 600px. If it has more space, it'll take it up. There's a catch -

min-width

is only supported by standards-compliant browsers.

So what does it mean for IE? the

width

property is accepted by IE as

min-width

in a way, which is to say, if the content within the

div

is too large, IE will force the encapsulating set-width element to become larger. However, without that content, it will stay at its 600px width.

If I was faced with that situation, I would have a 1px high, transparent

div

on the top or bottom of all your other code, set to a fixed-width of 600px. Then, perfectly liquid layout the rest of your site. Once the browser resizes below that width, this "min-width

div

" gets in the way, and forces a scrollbar.

In theory.

:P

[vcount]

Wow, Setek. That was JUST what I was looking for, thanks so much.

I feel like an idiot for banging my head against the problem so long when it was this simple.

Sorry about posting that other site, can the mods take it out or something?

[Setek]

Umm, underneath your name on your original post there should be a little button that says 'Owner edit' - you should be able to strip it out yourself :)

And don't worry about it - we all have days where we tear our hairs out with a misplaced

}

or

;

:)