Through my light experience in web design, I have been frustrated with setting my page widths. Why is it that when I design my page in the lab it looks great but when I look at it on my laptop at home it suddenly looks huge!? I have tried using several combination's of fixed and percentage widths, but nothing ever comes out looking like I want it to.
With the use of max and mix page widths, you can change the way your page is rendered based on the users browsers settings. The example I found is on the 'CSS Tricks' website. They have a page called "Perfect Fluid Width Layout" where the show a good example of a page that varies in width. Their min-width is set to 780px for those users with a low resolution screen and the max-width is set to 1260px for users with high resolution screens.
I think the real trick to their page comes with their combination of padding and width settings. With the main div box has a variable width setting, the boxes within it have a fixed width. Their spacing is determined by the padding settings. Both are then maintained while the browser changes size. I might have to practice this method more to fully understand it, but on paper it makes sense. I recommend checking out their page and use firebug to see how it works.
Subscribe to:
Post Comments (Atom)
I had some trouble with the margins and padding myself. I went to the site you recommended "Perfect Fluid Width Layout", some of the language on this site was in English but the rest of it was in another language. I'll try working with the spacing and padding settings as you suggested.
ReplyDeleteHelen, take a look at their CSS http://css-tircks.com/examples/PerfectFluidWidthLayout/style.css and their HTML. If that doesn't help, use firebug.
ReplyDelete