I'm working on a layout and I am stuck!

My problem is that I can't get a div to stay the same height as the one next to it.


HTML code:

<div id="main"> 
<div id="leftside"></div>    <------ I want this to be the 100% of the height of "main" 

<br><br><br>Just some test area to play around with<br><br><br>

<div id="rightside"></div>   <------ I want this to be the 100% of the height of "main" 
</div>

CSS code:

#leftside { 
    width: 14px; 
    background: url(tnav_l.gif); 
    float: left; } 
#rightside { 
    width: 15px; 
    background: url(tnav_r.gif); 
    float: right; } 
#main { 
    width: 100%; 
    text-align: center; 
    background: url(cb_fbr_tex.gif); }

I tried setting height to 100% and of course that doesn't work. I know a quick solution by using tables but I want to keep the entire site css/html validated. Any solutions using CSS?

Complete HTML page: http://www.kmcustoms.com/test/index.html
CSS File: http://www.kmcustoms.com/test/toi.css

There's no method for stretching the divs. You need to use the faux columns method:http://www.alistapart.com/articles/fauxcolumns/

I went and checked out the link but it won't help in this situation. See I'm not using a fixed width on the layout. It is has a width of 100% and I need that border on both sides of the main div.

If it was fixed width it would have been simple to fix as I have used the method before on a layout. I tried to nest two div's to get the effect that I wanted which led me to another problem when I tried that. I set the first div with the side border to tile vertically and worked fine, just like I wanted. The problem in this case was the border on the right. I tried to set the img as the background on it to tile vertically starting at the top right and neither IE or Netscape displayed it correctly.

So it looks like I might have to use a table to get what I want or change the layout to a fixed width. Other than that I don't see and solution!

edit: I changed it to a fixed width to solve the problem, seems to be the only solution other using a table.

You need to layer your divs.

I normaly set it out like this. Copy it and give it a go.

 <style>
  #canvas{float:left; width:100%; border:1px dashed black;}
  #header{float:left; width:100%; border:1px dashed black;}
  #left{float:left;width:19%;border:1px dashed black;}
  #content{float:left;width:60%;margin-left:6px;  border:1px dashed black;}
  #right{float:left;width:19%;margin-left:7px; border:1px dashed black;}
  #footer{float:left;width:100%; border:1px dashed black;}
</style>

<div id="canvas">
   <div id="header"> header <br /> <br /><br /> </div>
   <div id="left"> left <br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </div>
  <div id="content"> content <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
  <div id="right"> right<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </div>
  <div id="footer"> footer <br /><br /><br /><br /></div>
</div>

I know there is a number of BR's in there but this is to show how the strech works.

The trick is to float everything left, when a box or a series of boxes = 100% it will wrap onto the next line so your left, content and right ID's will all stack next to each other with a header and footer on top and below that. Also make sure you put your widths in % and not px as you will get no stretch.

Best thing about floating is that it displays pretty much the same throughout browsers.

Hope that helps

Ibbo