SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Apr 2005
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    3 collumn layout

    Hi everyone,

    Ok i am currently making a website with 3 collumns in xhtml/css, now this is easy and got 3 collumns that extend to the bottom of the page. But i have a problem with the right collumn where i am unable to extend it to the rest of the page.

    The left collumn is fixed and ill say 200px for example, then i have my middle content which is also fixed and say it is 500px. Now i want the right collumn to then extend to the edge of the page. Just wondering if anyone knows how to achieve this.

    Thanks.

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you show us your link/code?

  3. #3
    SitePoint Member
    Join Date
    Apr 2005
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CSS:

    html, body {
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    height: 100%;
    color: #999999;
    }

    #left_nav {
    float: left;
    height: 100%;
    width: 166px;
    background: #3b3837;
    }

    #content {
    height: 100%;
    float: left;
    width: 490px;
    padding-left: 50px;
    background-image: url(images/text_bg_gfx.gif);
    background-repeat: no-repeat;
    background-position: bottom;
    }

    #grey_extend {
    height: 100%;
    float: right;
    background: #f0efef;
    width: auto;
    }

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have a look at One True Layout for a tutorial on how to achieve equal height columns.

  5. #5
    SitePoint Member
    Join Date
    Apr 2005
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i have already ahcieved equal heights, which i am not after. What i am after is the right collumn to extend to the end of the browser. This could be 2px or 900px. But i want the left and middle collumns are fixed.

  6. #6
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Yes you have 100% high columns, but did you try to ad content (hight) to one column ?
    It's going to fly like a handful of mortar (Langley Aerodrome)

    For the other problem of the rest of the screen width (100%?), to the right you need a margin box

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <
    title>document title</title>
        <
    style type="text/css">

        
    /* mac hide \*/
        
    htmlbody {height:100%;}
        
    /* end hide */

        
    * {margin:0;padding:0;}
        
        
    head+/**/body .fc:after{
        
    content:".";
        
    display:block;
        
    height:0;
        
    clear:both;
        
    visibility:hidden;
        }
        
        
    /*  \*/
        
    html .fc{height:1%;}
        
    /*  */
        
        
    div{font-size:1em;}

        
    body{font-size:75%;background#eaeaea;}

        
    .wra{margin:0 auto;backgroundurl(../../../_bgr/xx.gifno-repeat 166px 100%;}
        * 
    html .wra{height:100%;}
        
    head+body .wra{min-height:100%;overflow:hidden;min-width:768px;}
        
        .
    wx{width:64em;}
        
        .
    l{float:left;}
        
        .
    lw{width:166px;background:#c6c6c6;}
        
    .llw{width:490px;}
        
        .
    ll{width:100%;float:left;background:#ff6600;}
        
        
    head+body .ex:after{
        
    content".";
        
    display:block;
        
    background:inherit;
        
    height:0;
        
    margin-bottom:-32767px;
        
    padding-top:32767px;
        }
        
        .
    wra p{padding:.5em;}
        
        * 
    html .r{float:left;}
        
    head+body .r{margin:0 0 0 656px;}
        </
    style>
        <!--[if 
    IE]>
        <
    style type="text/css">
        .
    ex,* html .r{padding-bottom:32767px;margin-bottom:-32767px;}
        * 
    html body {width:expressiondocumentElement.clientWidth 768 ? (documentElement.clientWidth == ? (body.clientWidth 768 "768" "auto") : "768px") : "auto" );}
        *+
    html{height:99%;}
        
    /* haslayout IE 7 */
        
    *+html .fc{zoom:1;}
        </
    style>
        <![endif]-->
    </
    head>
    <
    body>

    <
    div class="wra w fc">

    <
    div class="l lw ex">
    <
    p>
    start start start start start start start start start start start start start start start start start start start start 
    start start start start start start start start start start start start start start start start start start start start 
    start start start start start start start start start start start start start start start start start start start start 
    start start start start start start start start start start start start start start start start start start start start 
    start start start start start start start start start start start start start start start start start start start start 
    start start start start start start start start start start start start start start start start start start start start 
    <!-- 
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> -->
    <
    br />end
    </p>
    </
    div>

    <
    div class="l llw ex">
    <
    p>
    start start start start start start start start start start start start start start start start start start start start 
    start start start start start start start start start start start start start start start start start start start start 
    start start start start start start start start start start start start start start start start start start start start 
    start start start start start start start start start start start start start start start start start start start start 
    start start start start start start start start start start start start start start start start start start start start 
    start start start start start start start start start start start start start start start start start start start start 
    <!-- 
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> -->
    <
    br />end
    </p>
    </
    div>

    <
    div class="r">
    <
    div class="ll ex">
    <
    p>
    start start start start start start start start start start start start start start start start start start start start 
    start start start start start start start start start start start start start start start start start start start start 
    start start start start start start start start start start start start start start start start start start start start 
    start start start start start start start start start start start start start start start start start start start start 
    start start start start start start start start start start start start start start start start start start start start 
    start start start start start start start start start start start start start start start start start start start start 
    <!-- -->
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
    <
    br />end
    </p>
    </
    div>
    </
    div>
    </
    div>

    </
    body>
    </
    html>


    </
    body>
    </
    html
    Last edited by all4nerds; Jul 4, 2006 at 09:19.


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
  •