How to force scrollbars if window is smaller rather than repositioning?

[canadianjameson]

*lunch-box in in hand, Thomas schoolbag squarely on back, Diego sneakers clean... all set for school :)*

Oh wait I'm 24, a university student, and have been doing this on and off for years... crap.

(p.s: Ladies; form an orderly line and try to contain yourselves please... I'll get to each of you in turn :D)

So here I am with a website 2/3rds finished and I accidentally open the preview browser in less than maximum... and objects move out of alignment. Why didn't I see this earlier.

How can I make it so that, like on yahoo.com and many others, if a browser window is smaller than X amount the horizontal scrollbar appears instead of my objects repositioning themselves horizontally to accommodate the space available?

*slinks back into shadows wearing dunce cap*

[srule_]

Perhaps u can try setting a minimum width:



#pagewrap {
min-width:XXX;
}

[canadianjameson]

here is my pageContainer CSS...

#pageContainer {
display: inline;
min-height: 100%;
min-width: 1000px;
overflow-x: visible

i used 1000px to test if I could see the x scrollbar and I couldn't :(

see for yourself: www.enviromark.ca/head/index.htm --> try to shrink the page and look what occurs :(

[effpeetee]

I found this on the web.

Is it of any use?

Frank

Home » Archives » 2003 » July »
Wide-body CSS
by Steven Garrity [7:39 PM July 22, 2003] - 14 replies
The advent of table-free pure CSS layouts has been great for those browsing with non-PC environments (handhelds, etc.) as they allow cleaner more structured mark-up. However, in normal browsers, even the most beautiful flexible-width CSS layouts get wacky when the window gets too narrow.

Take, for example, Doug Bowman’s Stopdesign site and his client’s site, Wired News (I’m not picking on Bowman — in fact, I chose these sites because his design and CSS is so great, it makes for a good example). Both of these sites use CSS for layout, look fantastic, and are flexible width (all good). However, when you shrink your browser window too narrow (200~300px), elements start to wrap, and this generally get jumbled (see a screenshot of several examples include some of our own sites).

This usually isn’t a problem, as no-one with a modern CSS-aware browser is looking at a site in such a narrow window (and these sites look great with the CSS turned off, no matter how small the window). Still, this has always bothered us. It’s these little things that make a layout feel solid or like they could break at any minute. The issue may also arise when sites are view in another application, such as a small pane in an RSS reader.

We discovered a nice little fix for this that only works in some cases and in some browsers, but is harmless elsewhere, so perhaps worth applying. If you add a min-width attribute to the html element, the page will hold open at the specified width, adding a horizontal scroll bar when the windows is made any smaller. This behaviour is pleasantly familiar to those schooled in class table-layouts.

The CSS is simple;

html { min-width: 550px; }

[effpeetee]

http://labs.silverorange.com/archives/2003/july/widebodycss

Frank

[bazz]

Hmmm, I haven't heard this sort of question before. :)

Horizontal scrollbars are not good for a user-friendly customer interface.

You seem to have achieved what moany designers struggle for - a fluid design, which means that as a window changes size, the content fits fluidly. I read before here, in CF, that a high proportion of people use smaller windows because they have more than one open.

The bbtter solution for your issue, I think, is to split your header image into three or, to make it smaller so that it will remain intact, if the window is reduced in size - to suit the users choice.

Perhaps: -

put 'A dieu Mains' into a .gif
put the ssquares into a gif
put the 'Head and Hands' into a gif.

As three gifs, in a smaller window, they will move fluidly so that the words fall within the width of the squares so that the wondow can be smaller before it 'breaks'. Then put the rule into your 'logo' div saying scrollbar : auto; and so, if the window is too small for the logo, the div will put the scrollbar in horizontally for the logo, but not, for the whole page - coz it isn't needed.

bazz

[canadianjameson]

Hey Bazz,

As it turns out it is actually 9 images, not 1 :D Each square changes color as a function of a script, so they are all separate.

I hear what you're saying re: the fluidity and accommodation of window size given a users preference... however the problem that I was having was one of the right hand navigation was wrapping other elements and causing them to shift (especially the main area where the information is displayed) when the size was smaller... this is something that I can't have :(

My options are, unfortunately, to force a min-width and hope that IE users can expand the window enough... or lose the right menu.

What do you suggest?

[bazz]

Sorry Canadianjameson; I meant to reply to this much sooner.

I would keep your header images in a fixed width div so that when the window is made excessivley small, that it remains intact. And I would keep the rest fluid as you had it, with the right hand menu remaining.

I believe that most users who make a window very small, expect there to be some positional issues but they are content enough, if they can still get around it all as easily.

hth
bazz