Hi its my first post here, I’ve found myself reading some of the sitepoint blogs and clearly this is a great place for CSS discussion; so HI!
I’d like to know what methods people use to layout their pages for different display sizes? I have a simple brochure site with the content in the middle and blankspace on either side like: http://www.corshamref.net/.
If i was using a fixed width for the content I’d probably settle for 800px, but this looks like a narrow alley on larger size screens.
To make the width change to fit different screen sizes do you use %ages so that the page auto resizes or do you switch style sheets for different size screens?
You can set min/max widths on the parent elements and thus it will accomodate for a wide range of screen sizes. Then you can set percentages for your inner structure to make it flexible…though realize that pixel perfect layouts via this method is impossible
Switching width based on the screen size only works in JavaScript (which is bad for graceful degradation) and CSS3 - which isn’t supported cross browser. How about you stop using pixels for width and use percentages instead (or min/max width to give it a rough estimate to work with rather than a fixed width). With the range of devices out there it’s more important than ever that your design is either liquid or fluidly designed, in preference to using a fixed width layout.
As Ryan said you could use min and max widths to allow the page to scale within a reasonable range. You don’t want it too wide because long lines are unreadable and usually you would stop the page getting too small just before the point that it all breaks up.
Here is a min max demo although this one is a little complicated as it has other features.
I now have a slightly unusual problem. I have content that is in the center column div but I want it to display in the right column, also I don’t want it to affect the flow of the center column content. Unfortunately the CMS I’m using outputs all content to one div.
Does anyone have any suggestions to fix this using CSS?
You may need to give us an example of some sort if you are not referring to the site in the first post. We’d need to see what sort of structure we are working with and then we can try and think of ways of doing what you want:)
Welcome to SitePoint, Timme. I am rather fond of Matthew James Taylor’s layouts, and use them frequently. (Although he says they only come in pixels and ems, he has percentage variants as well.) But while there are many good things about them, they have some rather irritating design elements that I don’t like. I’ve tweaked most of his layouts for my own use after battling with them several times running (and hollering for help in these forums numerous times). One of the biggest tweaks is adding min/max widths, and some of Paul’s JavaScript to make their widths behave in IE6. If you’re interested, let me know and I can share some of the templates with you for you to experiment with.
