Minimum Browser Window Size

[ByteWizard]

Is it possible to specify the minimum size to which you would allow the browser window to shrink. For example, if you had a 3Col style sheet with <div> with 2 cols fixed and one floating, if you could fix the min window size to the size of the two fixed cols plus a smidge for the floating col, it would make the page behave better.

[DCElliott]

Try BODY {... min-width:600px; ...} Once the viewport gets < 600px you will get a horizontal scrollbar (in browsers supporting min-width property) The caveat here is that if you have inflexible content whose width adds up to >600px, then the scrolling will happen sooner.

[ByteWizard]

Is this good technique? Or do you just stay away from this parm? How about cross-browser compat?

[DCElliott]

It is perfectly "legal" and is designed to create a limit to the amount of width-squish your page must endure. There are other ways to enforce a minimum width before scrolling. Table widths are often used, but you could use a transparent graphic trick <img src="images/1x1trans.gif" height="1px" width="600px" /> or creating an invisible horizontal rule of specified width instead. The nice thing about the CSS min-width property is that it can be set externally and not be part of the html.

Some browsers do not support the min-width and have to be forced through other means.

[ByteWizard]

Table widths are often used
I was trying to wean myself from tables altogether altho I know there will be a few instances where they will be used, just not for the formatting of the web page.

you could use a transparent graphic trick
I have used the single pixel high xx pixel wide graphic before but this is so klugy. CSS is so appealing because you can make one change and don't have to go slugging thru the whole bit of code to find every place you used some formatting aspect. I have always been a big proponent of "externalized parameters" which is old geek-speak for what CSS does now. The more I learn, the more I like it.

creating an invisible horizontal rule of specified width
Pretty much the same as the xx wide graphic. Never used it but I can see how it would work just fine.

width-squish
Sounds like an old Nova Scotian word with Indian origins...


SO, bwana, what method do you use? Depend on your mood?

[Zero Angel]

I'm guessing that you'd have to match the HR with the background color if you were to use the HR trick, its just another place to change the color value, which seems unweildy, especially if you use an image for the background.

Transparant graphic trick is the most reliable and only has to be done once if you're using a template system (ie: XSSI/PHP).

[DCElliott]

I am a CSS purist and use the min-width property (with some deference to older browsers with HR.holder styles to force widths in cases of non-compliance.) I merely listed the other ways for completeness (or for persons not using CSS).

It is important to understand the difference between page and viewport and window. With zero content, you can reduce a browser window to nothing (excepting that some browsers have default margins which take up some space) Once content takes up some amount of space, there comes a point at which the area of the browser window used to render the page becomes smaller than the content. Enter scrollbars to allow moving the viewport over the page. If you have totally flexible content, you can (and here is that good word again) squish it horizontally and it will flow downwards. You get a vertical scroll but no horizontal. Setting a min-width says: stop squishing and give me a horizonatally-scrolling viewport at say, 600px. That allows for the width of GUI objects like the window frame and scrollbars. This way you still provide for the user with a 640 resolution with the window maximized to not have a horizontal scroll (their screen real estate is precious enough at that point).