SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fluid layout! Best practices

    I am looking for some good sources/tutorials for a fluid layout that serves, both, desktop and mobile devices. For desktop I would use a percentage based layout in combination with max- and min-width e.a.
    Code:
    #wrapper {
    	width: 70%;
    	max-width: 1200px;
    	min-width: 780px;
    	margin: 0 auto;
    }
    But that isn't really an option for mobile devices? This site for example shows very good both on desktop and mobile devices. I have been going over their stylesheet, (which is I think one of those template stylesheet) but couldn't find anything out of the ordinary except that they don't use the min-with property. Would that be a way of doing this or should I have a separate stylesheet for mobile devices? Any advice would be highly appreciated.

    Thank you in advance.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    You should find something you need here or here or here.

    The basis of a fully fluid site involve using media queries to change the layout when it no longer fits the viewport. There are many strategies but a common theme would be mobile first and then expand for more capable devices. It is not just a case of adding a simple rules set to the body tag but a whole design concept from the ground up.


    This site for example shows very good both on desktop and mobile devices
    I didn't see anything special there apart form a media query to scale up for larger viewports. The iphone emulator shows the site just shrunk to fit with no special rules that I could see (I assume the actual iphone would be the same but have;t got one to hand to test). If the site is 960px wide then it gets scaled to fit the iphone better but a better approach would be a change of layout for small devices and not just a shrunk layout with unreadable text.

  3. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul. Thank you for your reaction, links and tips. All very helpful. There is one other thing I can't get my head arround and that is the height property in a fluid design. I know that for pictures I could use the max-width: 100% rule, but what about normal divs? I can set a width yes how do I set a height in such a way that aspect ratio will stay in place?

    Thank you in advance.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B
    The iphone emulator shows the site just shrunk to fit with no special rules that I could see (I assume the actual iphone would be the same but have;t got one to hand to test)
    Yes, same on the real thing.

    Quote Originally Posted by donboe View Post
    I can set a width yes how do I set a height in such a way that aspect ratio will stay in place?
    It will scale automatically. Don't set heights in general. Let elements find their own natural height.

  5. #5
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph. Thanks fot the reaction. I understand that part, but what if I have four divs in a row, having a different amount of text, all having a different background color but I want to have them all the same height
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by donboe View Post
    Hi Ralph. Thanks fot the reaction. I understand that part, but what if I have four divs in a row, having a different amount of text, all having a different background color but I want to have them all the same height
    You have to separate "what you want" from "what is good for the content". Instead of imposing a design on the content is should to some degree be the content dictating the design

    However, these days you can use display: table and display table-cell properties (for IE8+) to have equal height boxes without the need for specifying a height. For smaller devices you can change the element (via media queries) back to display:block or float.


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
  •