SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Display Size Best Practice: margins as % , switch style sheets OR ??

    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?

    Many thanks
    Tim
    Last edited by timme_rich; Apr 1, 2010 at 10:39. Reason: spelling

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.

  5. #5
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys, The Min/Max width method is what I've been looking for, thanks for the help!

  6. #6
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I have content that is in the center column div but I want it to display in the right column,
    I'm confused, I don't SEE a right column. I see a left column and a center column. Did you mean you want to create a right column?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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

  9. #9
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •