Results 1 to 8 of 8

Thread: CSS 3 Column Layout

  1. #1
    Join Date
    Jan 2011
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default CSS 3 Column Layout

    I am trying to update my old website from tables to only CSS using DIV tags, I have tried various coding, and this one is the closest, but my left and right columns disappear to the bottom somewhere. Here is the CSS Code I used. Can anyone let me know where I am going wrong? I want the website to look like my old one http://www.i4-webdesign.com which has a 2px border, when I omit the border it looks fine. Also I require it to be 900px wide. Thank you.

    body {
    margin:0;
    padding:0;
    line-height: 1.1em;
    background-color: #fff;
    }
    #container {
    width: 900px; /*Width of main container*/
    margin: 0 auto;
    background: #FFF;
    }

    #wrapper1 {
    position:relative;
    width:900px;
    background:#FFF;

    }
    #wrapper2 {
    position:relative;
    text-align:left;
    width:900px;
    background: #FFF;
    }
    #header {
    background: #FFF;
    height: 200px; /*Height of top section*/
    margin: 0;
    padding-top: 0px;
    }
    #maincol {
    margin: 0 225px 0 185px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
    }
    #leftcol {
    float: left;
    width: 185px; /*Width of left column in pixel*/
    margin-left: -900px; /*Set margin to that of -(MainContainerWidth)*/
    background: #FFF;
    border-right: 1px dotted #97BF97;
    }
    #rightcol {
    float: left;
    width: 185px; /*Width of left column in pixel*/
    margin-left: -900px; /*Set margin to that of -(MainContainerWidth)*/
    background: #FFF;
    border-right: 1px dotted #97BF97;
    }

    #footer {
    clear: left;
    width: 100%;
    background: #fff;
    color: #FFF;
    text-align: center;
    padding: 4px 0;
    }

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    691
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    Hi there Susie56,

    and a warm welcome to these forums.

    Check out the attachment for a simple example of your requirements.

    Also you may find some relevant information regarding the layout here...

    coothead
     
     

  3. The Following User Says Thank You to coothead For This Useful Post:

    Susie56 (01-23-2011)

  4. #3
    Join Date
    Jan 2011
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    This is amazing, thank you so much. I am very grateful, it all makes sense now.
    Thanks again, Susie

  5. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,382
    Thanks
    31
    Thanked 148 Times in 142 Posts
    Blog Entries
    34

    Default

    Coothead, nice work.
    You can refine this by adding, for instance:
    #container {position: absolute; left:0px; right:0px; top:30px; bottom:30px;}
    #footer {position:absolute; left:0px; right:0px; bottom:30px;}

    ===
    Arie Molendijk.

  6. #5
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    691
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    Hi there molendijk,

    your 'refinement' is not required according to Susie56.
    Quote Originally Posted by Susie56
    I want the website to look like my old one http://www.i4-webdesign.com ................ Also I require it to be 900px wide.
    coothead

  7. #6
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,382
    Thanks
    31
    Thanked 148 Times in 142 Posts
    Blog Entries
    34

    Default

    Quote Originally Posted by coothead View Post
    Also I require it to be 900px wide
    position:absolute; left:0px;right:0px;bottom:30px; doesn't change the width. It just causes the div to be absolutely positioned while remaining in the center.
    Now that it is absolutely positioned, we can specify its position with respect to the top and the bottom.
    ===
    Arie.

  8. #7
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    691
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    Hi there Arie,

    how does a div element with this css...
    Code:
    
    #container {
        position:absolute; 
        left:0; 
        right:0; 
        top:30px; 
        bottom:30px;
     }
    
    ...have a width of 900px and be horizontally centered?

    coothead

  9. #8
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,382
    Thanks
    31
    Thanked 148 Times in 142 Posts
    Blog Entries
    34

    Default

    Code:
    #container {
    position:absolute; 
    left:0; 
    right:0; 
    top:30px; 
    bottom:30px;
    width:900px;
    margin:auto;
    }
    ===
    Arie.

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
  •