SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    3 Col semi Liquid layout

    Is there a simple way to make the center column (the content div) but not the left and right columns in a 3 column layout using only divs and css? Lets say I want the content div to be 500px on a 1024x768 maximum sized window but when you move the window around, the content div gets smaller but never bigger than 500px. Am I making sense?

  2. #2
    $books++ == true matsko's Avatar
    Join Date
    Sep 2004
    Location
    Toronto
    Posts
    795
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is known as elastic layout design and is very useful for variable layout sizes.

    You can use the min-width and max-width css properties. The only problem is that they do not work with IE6.

    Well, there is a min-width hack for IE6, but maximum width effect won't work for IE6 on its own.

    Basically.

    The HTML:

    Code:
    <div id="wrapper">
    <div id="left"></div>
    <div id="right"></div>
    <div id="center"></div>
    </div>
    And the CSS:

    Code:
    #left,#right { width:100px; }
    #left { float:left; }
    #right { float:right; }
    #center { max-width:500px; }
    This works, but IE6 won't like it. So in order to make it work with IE6 then you should use write a JavaScript onresize event which determines the size of the center box and sees if it goes over 500px.

    Something like this:
    Code:
    * html #center { width:auto; }
    * html #center.tooBig { width:500px; }
    Then in Javascript

    Code:
    var centerDivWidth = ...
    if(centerDivWidth>500)
    centerDivWidth.className='tooBig';
    else
    centerDivWidth.className='';
    I can't believe I ate the whole thing

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Neat, I'll give it a try, but will this validate?

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Seems to have worked but now when the right column hits the actual text (while the window is being resized) located in the center div it moves under it.

    http://www.mediaatmidnight.com/test/test.htm

  5. #5
    $books++ == true matsko's Avatar
    Join Date
    Sep 2004
    Location
    Toronto
    Posts
    795
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Set a maximum size for the container as well (100px + 100px + 500px + borders).

    And yes, the CSS is perfectly valid
    I can't believe I ate the whole thing

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually it was the minimum width that had to be set! But thanks. It fixed the problem in FF but not IE. I added the javascript

    var containerDivWidth = ...
    if(containerDivWidth<877)
    containerDivWidth.className='tooSmall';
    else
    containerDivWidth.className='';

    and for css...

    * html #container { width:auto; }
    * html #container.tooBig { width:877px; }

    But it didn't work
    Last edited by betawaffles; Jun 4, 2008 at 10:09. Reason: messed up

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually that didn't work either, my content div does not adjust at all when minimizing in any browser, the container adjusts just fine though. The right div and content div fall under the left div when minimizing! Please help.

  8. #8
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Adding the following to the center div sort of fixes this but causes my drop downs to appear behind it. It's also kind of a fudgy way of doing it since the pixels will render differently on browsers...

    left:197px;
    right:210px;
    position: absolute;


Tags for this Thread

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
  •