Elastic layout with minimum/maximum width (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

Starhugger -> Elastic layout with minimum/maximum width (7/12/2008 22:17:02)

Hi everyone,

Is there such a thing as creating a CSS layout with a centered 3-column structure, where the outer columns are a fixed width and the middle column is elastic according to the user's browser window, but there is a maximum width to which it will expand and a minimum width to which it will contract?

In other words, if someone has one of those panoramic wide screens or a super high resolution, it would only expand to a maximum of, say, 900px (for the sake of argument). And if the user has a very low resolution screen setting, it would not shrink to less than, say, 400px (again, for the sake of argument). In between, the middle column would resize proportionately according to the screen size.

I would like to design a layout that is flexible, but I don't want to wind up with long one-line paragraphs in someone's cinemascope screen, nor with overlapping boxes and images in tiny screen sizes. I guess the minimum size could be accomplished with an empty gif or something, although it would be nice to be able to do it with CSS instead.

The closest I've seen is something that uses left and right side margins that are a percentage of the screen size, but I still wouldn't be able to know how wide the center column might go when I design the inside layout for all the bits. I'd rather know that there's a minimum and a maximum so that I have some idea of what it's going to look like and I can work around those parameters.

I haven't seen anything like this in my search travels, but I might have missed it. Thanks!

Starhugger




Tailslide -> RE: Elastic layout with minimum/maximum width (7/13/2008 3:18:22)

Yep totally possible.

Personally I tend to either set the widths of columns in ems so that it all expands at the same rate or using percentages so that again you get the fluidity. I tend not to use a mix of fixed and fluid - just personal preference.

What I do in either case is give the containing div (that contains the lot) a min-width and a max-width and then just set the inner widths as percentages. This ensures that it won't expand past what you want it to. If I'm going for a fluid, full size layout then I also set a width for the container div (say 98%) but I'm safe in the knowledge that once it hits it's max-width (say 1200px) that it won't grow any wider so you don't end up with the long unreadable lines.

Now the slight fly in the ointment (of course) is IE6 which doesn't understand min/max-widths BUT that's fairly straight-forward to get around by using a conditional comment aimed at IE6 and under. You then feed it the following (obviously widths changed to suit): 
body {width:expression( documentElement.clientWidth < 760 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 760 ? "760" : "auto") : "760px") : "auto" );}
#container {width:expression( documentElement.clientWidth > 1200 ? (documentElement.clientWidth == 0 ? (body.clientWidth >1024 ? "1200" : "auto") : "1200px") : "auto" );}


What this does is basically force IE6 and under to have a min-width of 760px and a max width of 1200 in this case.

What I do for 3 columns is to have a container div with two divs within it, both floated left (to avoid an IE dropping div issue). The second floated div is the right-hand sidebar. Within the first floated div contains two more floated divs - the left hand sidebar and the main content. I find this technique easier to understand and implement that other perfectly valid techniques such as negative margins.

Have a look here: http://www.pmob.co.uk/ Paul has a load of 3 column techniques (many of which are negative margins) and is a real expert on the old CSS.



Starhugger -> RE: Elastic layout with minimum/maximum width (7/21/2008 0:07:39)

Hi Tailslide,

Yikes! I thought I had said thank you already, but apparently my brains got scrambled. [sm=sick.gif] If I'd ever heard of min-width and max-width before, I must have assumed they were compatible with very few browsers. I haven't seen them used or referred to by anyone, so it's curious why this hasn't been used more often by those making the Great Quest For The Ideal Internet Layout. [;)] Thanks for the IE-sick fix, too. I will definitely play around with these.

Thanks again for the help!

Starhugger




c1sissy -> RE: Elastic layout with minimum/maximum width (7/21/2008 7:49:15)

Hi Starhugger,

Here is an article that you might want to read.

And a couple more for you.

1. 9 timeless 3 column layout techniques

2. Equal 3 column layout

3. From Cross Browser.com's site

4. Green beast article on different layouts

5. CSS Tricks site

A great book to get is one called stylin' with css by Charles Wyke Smith. He goes into detail on layouts with min max widths, and is an excellent author and a terrific person. He has two books out on css, I would recomend the second issue. Though it might be good to have the first one as well since it is such a great read.

I hope that some of this information is helpful for you.



Starhugger -> RE: Elastic layout with minimum/maximum width (7/21/2008 21:04:45)

Hi Deb,

Wow, thanks so much for these links and the book referral! I haven't come across these sites before in my search for CSS column techniques, and they look very helpful on first glance. I've got my homework cut out for me now. [:D]

Starhugger




c1sissy -> RE: Elastic layout with minimum/maximum width (7/22/2008 8:13:22)

Hi Starhugger,

Just become good friends with google, and you can find a wealth of information when you search. All I did to find information for you was to highlight terms in your post for information to find for you.

In regards to the book. I have all 3 of his books. He is one of those writers that can write a book like he is right there talking to you. He explains things really great.

He also has a book called codin for the web which is pretty good as well.

If you need anything else just let us know.[;)] And good luck with your reading!



Starhugger -> RE: Elastic layout with minimum/maximum width (7/22/2008 19:14:41)


quote:

Just become good friends with google, and you can find a wealth of information when you search. All I did to find information for you was to highlight terms in your post for information to find for you.

Huh?? What do you mean "highlight terms?" What fresh magic is this?

Starhugger




c1sissy -> RE: Elastic layout with minimum/maximum width (7/24/2008 9:45:23)

Hi Starhugger,

Ok, you know how to right click and highlight things? Well do that and copy and paste into google, or if you have the Firefox extensions you can always highlight it and then right click and up comes the little box with all the information in it, and one of the options is to search google.

Both ways work really great.

If you have anymore questions please post them.



Starhugger -> RE: Elastic layout with minimum/maximum width (7/24/2008 11:22:12)


quote:

...if you have the Firefox extensions you can always highlight it and then right click and up comes the little box with all the information in it, and one of the options is to search google.

Oh! I never knew that was there! Thanks! [:)]


SH



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.109375