#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2004
    Posts
    44
    Rep Power
    15

    Side by side divs, one fixed-width, one not


    I'm working on a site which has a header and footer div, and in the main section in between, it has a narrow left div and main content to the right.

    I've got the overall width centered at 90%, and I want the left div to be 250px wide, and then the right main content div to be the remaining width of the 90%. I also want to make sure it doesn't resize below about 600px when the screen is resized.

    Am I better off setting a fixed width of the overall width instead of a percentage? That way I can make the page about 800px wide, left pane 250px, and main content 550px? Any other thoughts?

    Thanks.
  2. #2
  3. Banned

    Join Date
    Jul 2004
    Location
    The Mews At Windsor Heights
    Posts
    5,326
    Rep Power
    0
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Language" content="en" />
    <title></title>
    <style type="text/css">
    
    body {
           background-color:#666;
           margin:0 auto;
           text-align:center;
           width:90%;
           }
    
    #left {
            background-color:#FFF;
            border:1px solid #000;
            float:left;
            width:250px;
            }
    
    #content {
               background-color:#FFF;
               border:1px solid #000;
               margin:0 0 0 260px;
               min-width:600px;
               }
    </style>
    </head>
    <body>
    
    <div id="left"><p>left</p></div>
    <div id="content"><p>content</p></div>
    
    </body>
    </html>
    You could use absolutely position the left div instead of floating it, if you prefer.

    To maintain at least 600px in browsers that don't recognise min_width you should add something with a fixed width of 600px inside the #content div.

    Also you would probably want to use "faux-column" background images to make the two divs appear to be the same height.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2004
    Posts
    44
    Rep Power
    15
    Originally Posted by b3n
    You could use absolutely position the left div instead of floating it, if you prefer.

    To maintain at least 600px in browsers that don't recognise min_width you should add something with a fixed width of 600px inside the #content div.

    Also you would probably want to use "faux-column" background images to make the two divs appear to be the same height.
    Thanks for the reply, but I wasn't quite getting that to work.

    I think I figured out a way though, but I think you're right about the min-width.

    I used padding to space out the content div far enough, and z-index to overlap the left div on top of the padding of the content div.

    Code:
    #header
    {
      position: absolute;
      width: 90%;
      height: 25px;
      top: 0px;
      left: 5%;
      z-index: 2;
    }
    #left
    {
      position: absolute;
      width: 250px;
      height: 100%;
      top: 0px;
      left: 5%;
      z-index: 1;
      padding-top: 25px;
    }
    #content
    {
      position: absolute;
      width: 90%;
      height: 100%;
      top: 0px;
      left: 5%;
      z-index: 0;
      padding-left: 250px;
      padding-top: 25px;
    }
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2004
    Posts
    44
    Rep Power
    15
    Or not quite... that works perfectly in IE, but not FF.. FF pushes the whole 90% wide div over 250px and off the right side of the screen, instead of moving the left side in 250px.

    any ways to fix that?
    Last edited by RitzCracker; June 10th, 2009 at 03:08 PM.

IMN logo majestic logo threadwatch logo seochat tools logo