SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Mar 2003
    Location
    NY
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question height = 100%?????

    I have a container div with two divs inside of it. One is floated left as a sidebar, and the other is to the right where the content will go. I have a border-left on the content div to seperate the two sections. The problem is that if the content div is shorter than the sidebar div, the left border will only extend as far the content goes. I can't just set a specific height equal to the sidebar on the content window because the sidebar changes size depending on which section of the site you are in. Is there anyway to have the content window always stretch to the maximum height of container div?

    height: 100% doesn't work

    Thanks
    ((Brian) + (MacKenzie))

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    So you basically want 2 fluid columns? Dougbtx has presented a fluid 3col layout here: http://www.redmelon.net/tstme/3cols/

    Borrowing from doug's () code a 2col layout with borders added could be produced as follows:
    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">
    <!--
    .wrapborder {border:1px solid black;width:401px}
    .wrapper {
     border-right:100px solid yellow;
     width:300px; 
     background-color: #FFFFCC;
    }
    .outer {
     position:relative;/*hack for mozilla*/
    }
    .outer p {margin:0px;}
    .left {
     border-right: 1px solid #000000; 
    }
    .right {
     position:relative;
     width: 100px;
     float: right;
     border-left: 1px solid #000000;
     margin-right:-100px;
     z-index:100px;
     }
    -->
    </style>
    </head>
    <body>
    <div class="wrapborder"> 
      <div class="wrapper"> 
    	<div class="outer"> 
    	  <div class="right"> 
    		<p>right content goes here : right content goes here :right content goes 
    		  here :</p>
    		<p>right</p>
    		<p>right</p>
    		<p>&nbsp;</p>
    		<p>&nbsp;</p>
    	  </div>
    	  <div class="left"> 
    		<p>Left content goes here : Left content goes here : Left content goes 
    		  here : </p>
    		<p>leftcontent</p>
    		<p>l</p>
    		<p>l</p>
    		<p>l</p>
    		<p>l</p>
    		<p>l</p>
    		<p>l</p>
    		<p>l</p>
    	  </div>
    	</div>
      </div>
    </div>
    </body>
    </html>
    I've only just been playing around with the code myself so I've only tested in Ie6, moz 1.2 and Opera 7 but if you refer to Dougs original code I'm sure you can adapt it for other browsers.

    It may not be what you're after but I thought as I was messing around with it anyway it might help .

    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
  •