SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    BoOm-Rocka! Smarky's Avatar
    Join Date
    Jun 2000
    Location
    England
    Posts
    1,319
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    liquid layout with absoulte sidebar then content area split 50%

    Okay

    What i'm trying to do is have a sidebar that is fixed and a fluid content area. I got that no problem! But then I need to to put two div's inside that main content area that are each 50%, however when I do this, they take up half the page instead of half the content area, despite being in a container that is not 100% of the page.

    This is just a test document i have to try and figure the technique out, the code used here is:

    HTML 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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    .contain {
    	width: 100%;
    }
    .contain2 {
    	width: 100%;
    }
    .col1 {
    	width: 50%;
    	background-color: #FF0000;
    	position:absolute;
    }
    .col2 {
    	width: 50%;
    	background-color: #00FF00;
    	margin-left: 50%;
    }
    .side  {
    	background-color: #185870;
    	float: right;
    	width: 290px;
    }
    -->
    </style>
    </head>
    
    <body>
    <div class="contain"> <div class="side">s </div><div class="col1">s</div>
    <div class="col2">s</div></div>
    </body>
    </html>
    Garlic bread, I've tasted it, it's the future

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Make the 50&#37; widths 49.5% to get around an IE rendering bug that treats 50% + 50% as 101%.

  3. #3
    BoOm-Rocka! Smarky's Avatar
    Join Date
    Jun 2000
    Location
    England
    Posts
    1,319
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh thanks for the tip =) i'll have to remember that, but that's not the problem here. It does this in firefox too!!
    Garlic bread, I've tasted it, it's the future

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No wonder - absolute positioning. Just float the column and be done with it.

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    despite being in a container that is not 100% of the page.
    But your container *is* 100% of the page:

    Code:
    .contain {
    	width: 100%;
    }
    Is this what you're trying to do? (note that I put the "side" div outside of the container div):

    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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    .contain {
    	margin-right:290px;
    }
    .contain2 {
    	width: 100%;
    }
    .col1 {
    	width: 50%;
    	background-color: #FF0000;
    /*
    	position:absolute;
    */
    	float:left;
    }
    .col2 {
    /*
    	width: 50%;
    */
    	width: 49.5%;
    	background-color: #00FF00;
    /*
    	margin-left: 50%;
    */
    	float:left;
    }
    .side  {
    	background-color: #185870;
    	float: right;
    	width: 290px;
    }
    -->
    </style>
    </head>
    
    <body>
    <div class="side">s </div>
    <div class="contain"> <div class="col1">s</div>
    <div class="col2">s</div></div>
    </body>
    </html>

  6. #6
    BoOm-Rocka! Smarky's Avatar
    Join Date
    Jun 2000
    Location
    England
    Posts
    1,319
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah yes it is, but without the gap after the second col, although i changed it to 49.9&#37; which you can hardly see and in the real design the background colour is the same on both columns because it's set by the container, so this should work, thanks.

    So i guess the secret is the margin, which makes it 100% of the left over space, clever! i didn't think of this.
    Garlic bread, I've tasted it, it's the future


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
  •