SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard mPeror's Avatar
    Join Date
    Mar 2005
    Location
    Saudi Arabia
    Posts
    1,725
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Best/Easienst way to make a fluid layout?

    I just decided I'm going fluid with my next layout (with a minimum width - a mix between fluid and fixed).

    However, I've never done this kind of layout before, and the tutorials I found on google all use different ways and hacks for browsers.

    So, which method do you recommend that's easiest to understand/adopt and has least hacks?

    Your help is much appreciated

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know how to describe it, since I never do anything other than (constrained) fluid layouts or fluid/elastic hybrids.

    Some things that come to my mind:

    Stop thinking in pixels, except (possibly) for images and border widths. Use em for any dimensions you don't want fluid. It's also often very handy to use em for margins and padding.

    Don't use fully fluid dimensions for containers that will contain text. Set at least a min-width in em to ensure that long words won't overflow (or break the layout, in the case of IE). Also be careful with containers that include images, for the same reason. I sometimes specify the image width as a percentage, using a max-width in px that corresponds with the image's natural width. It can be tricky to get it to work in IE, though, without distorting the image.

    Make sure to set a reasonable max-width in em to prevent lines of text from being too long, since that's detrimental to readability.

    If you use floated columns, don't let the percentage widths add up to exactly 100%. A 1-pixel rounding error will then cause the last column to drop below the others.

    If you use the 'sliding doors' technique for background images, make sure to create the images with a sufficient width. Make them really wide (over 2000px) if that's possible without bloating the file size too much.

    HTH
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Wizard mPeror's Avatar
    Join Date
    Mar 2005
    Location
    Saudi Arabia
    Posts
    1,725
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot Tommy. Very informative.

    Do you have any example (a skeleton) in mind that implements what you said? a reference like that would be great in case anything goes wrong in my end.

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With the risk of being slapped on the wrist for self-promotion … my blog uses a constrained fluid/elastic hybrid and the aforementioned percentage width + pixel max-width for images. I think you could find out most of the things you need to know by doing a View Source and looking at my style sheet. If not, don't hesitate to ask.
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Wizard mPeror's Avatar
    Join Date
    Mar 2005
    Location
    Saudi Arabia
    Posts
    1,725
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great! I'll study that and ask again if I ran into any issues.

    Thanks again Tommy.


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
  •