SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Russia
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fluid Layout Problem (tables's better??)

    I'd like to point to some problem in css fluid layout.
    I have a simple 2-column layout where left div is fluid and right div have fixed width (like here).
    Now I have long gif in main div.
    When I try to constrict browser window I want to get something like this.
    But every css method to get such a layer give me something like this!
    Is there any way to avoid the distortion?
    Thanks in advance.

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Look at the top of this forum.

  3. #3
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Russia
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry but what does it suppose to mean? Where exactly at the top please?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The problem is that you don't in fact want a fluid layout but you are looking to replicate table behaviour

    In a floated layout the right column would simply drop below the left content and thus avoid the need for a horizontal scrollbar therefore being more accessible to users with small screens etc.

    What you are looking for is a layout the stops at about 740px and therefore would not be classed as fluid in my opinion

    Anyway disregarding that aspect the layout you want to achieve is simple in css but not simple if you rely on IE. IE doesn't support min-width which is the one command that is needed to make that layout work. In mozilla its simplicity itself as you just stick a min-width onto the container.

    Therefore you have 2 choices you can use a simple layout that suits mozilla and add in an expression for ie to compensate.

    e.g.

    http://www.pmob.co.uk/temp/2colminwidth.htm

    Alternatively you can go for a little more complex layout like this that achieves what you want but at the cost of some unnecessary nesting.

    http://www.pmob.co.uk/temp/2colsourcefirstexample2.htm

    Hope thats some help

    Paul

  5. #5
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Russia
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for thorough and wise answer.
    I like both solution (the first's more as it is simpler) ;-)
    As far as I can see "IE5 hack" is needed for IE6 too. Am I right?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Yes ie6 doen't support min-width either so the expression works for ie5 and above as it stands.

    Paul


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
  •