SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Nov 2003
    Location
    UK
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 3 column layout problem

    Hi,

    I'm try to convert a 3 column table layout to use CSS. For the table layout version see here -> http://new.glennhaworth.co.uk/new.htm. As you can see I've turned the table borders on.

    My problem is that the centre column needs to have a fixed width as it contains a flash object and the left and right columns need to have a variable width as they contain a background image (that's different in each) that's 1 pixel wide and repeats on x.

    This is what i have as so far for my css: -

    body {
    margin: 0px;
    padding: 0px;
    }
    #container {
    position: relative;
    display: block;
    width: 750px;
    margin: 0 auto 0 auto;
    }

    I've tried all sorts of things to position the left and right columns correctly, but I just can't get it to work.

    Thanks

    Glenn.

  2. #2
    Old Folks 127.0.0.1 pacres's Avatar
    Join Date
    Sep 2003
    Location
    ed.ab.ca.na.ea
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Glen

    This should help you out. http://css.maxdesign.com.au/floatuto...torial0901.htm

    It's a really stable design for most browsers.

  3. #3
    SitePoint Member
    Join Date
    Nov 2003
    Location
    UK
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I'll give it a go.

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

    Perhaps something like this might work for you.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    html,body {height:100%;}
    body {
     margin: 0px;
     padding: 0px;
    }
    #container {
    position: relative;
    width: 750px;
    height:100%;
    margin: 0 auto 0 auto;
    background:blue;
    z-index:10;
    }
    #rightcol {
     position:absolute;
     right:0;
     top:0;
     width:30%;
     height:100%;
     background-image: url(http://new.glennhaworth.co.uk/images/tile_right.jpg);
     background-repeat: repeat-x;
     background-position: left top;
     z-index:2;
    }
    #leftcol {
     position:absolute;
     left:0;
     top:0;
     width:30%;
     height:100%;
     background-image: url(http://new.glennhaworth.co.uk/images/tile_left.jpg);
     background-repeat: repeat-x;
     background-position: left top;
     z-index:2;
    }
    </style>
    </head>
    <body>
    <div id="container">Content</div>
    <div id="leftcol"></div>
    <div id="rightcol"></div>
    </body>
    </html>
    Just place left and right columns absolutely so that you can place your background gif in them.

    Hope that helps.

    Paul

  5. #5
    SitePoint Member
    Join Date
    Nov 2003
    Location
    UK
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that 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
  •