CSS issues: Divs even in height, borders

[dan_Vt]

I'm working on a theme for a site (carking.net) and am trying to get the three columns at the bottom (which are defined in CSS) even in height without defining a fixed height. I'd like left and right columns to automatically have the height of the center column, where wordpress posts will appear. Possible?

The second issue I'm having is the header and all three columns are in a container that has a left and right border. This border shows in IE fine, but (for a change) I'm having issues with Firefox. The border shows fine in the header, but not the columns, even though those are placed in the container...

Help very much appreciated.
Dan

 

[Dan]

For the even heights, you need to use a background image that has their background.

I'm not sure whats wrong with the borders.. :/

 

[dan_Vt]

That worked in IE, but not FireFox...

Page:

<div id="Page">
     <div id="Container">
          <div id="Header"><h1>Car King</h1></div>

          
          <div id="LeftAndContent">
		       <div id="Content">
			       <h2><a class="titleLink" href="http://www.carking.net/2006/06/coming-soon/" rel="bookmark">Coming Soon.</a></h2><div id="date">30 June 2006</div>
  <p>CarKing.net is coming soon.</p>
<p>Site is currently under construction so please bear with us.
</p>
  <br /><div id="Filed">Read Comments (<a href="http://www.carking.net/2006/06/coming-soon/#respond" title="Comment on Coming Soon.">0</a>)<img src="/images/postline.jpg" /></div>
	  
	     <br>
  

			   </div>
			   <div id="Left">
			   <img src="/images/twodash.jpg" />Categories<br />
			   <img src="/images/onedash.jpg" />News
			   <br />
			   <br />
			   <br />
			   <br />
			   <img src="/images/orangeline.jpg" />
			   <br />
			   <br />
			   <img src="/images/twodash.jpg" />Feeds<br />
			   <img src="/images/onedash.jpg" /><a href="http://add.my.yahoo.com/rss?url=http://www.carking.net/?feed=rss2">My Yahoo!</a><br />
			   <img src="/images/onedash.jpg" /><a href="http://my.msn.com/addtomymsn.armx?id=rss&ut=http://www.carking.net/?feed=rss2&tt=CENTRALDIRECTORY&ru=http://www.carking.net">My MSN</a><br />
			   <img src="/images/onedash.jpg" /><a href="http://www.newsgator.com/ngs/subscriber/subext.aspx?url=http://www.carking.net/?feed=rss2">NewsGator</a><br />
			   <img src="/images/onedash.jpg" /><a href="http://www.bloglines.com/sub/http://www.carking.net/?feed=rss2">BlogLines</a><br />
			   <img src="/images/onedash.jpg" /><a href="http://www.feedster.com/myfeedster.php?action=addrss&confirm=no&rssurl=http://www.carking.net/?feed=rss2">MyFeedster</a><br />
			   <img src="/images/onedash.jpg" /><a href="http://www.carking.net/?feed=rss2">RSS 2.0</a><br />
			   <br />
			   <br />
			   <br />
			   <br />
			   <img src="/images/orangeline.jpg" />
			   <br />
			   <br />
    <p align="center">
    <form id="searchform" method="get" action="/index.php">
         <div id="searchform input">
         <input type="text" />
		 </div><br />
		 <div id="searchsubmit">
         <input type="submit" value="Search" style="width:62px; height:20px; color:#FFFFFF; background:url(images/searchbutton.jpg); font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;" />
      </div>
     </form></p>
<br />
			   </div>
		  
		  
		  </div>
		  
		  <div id="Right">
		  <img src="/images/twodashwhite.jpg" />Links<br />
		  <li><a href="http://www.encentra.com/">Web Resources</a></li>
		  
		  <br />
		  <br />
		  <br />
		  <br />
		  <img src="/images/blackline.jpg" />
		  <br />
		  <br />
		  	  		  </div>
		

     </div>

</div>

Stylesheet:

body,html{
width:100%;
height:100%;
}

#Page{
background:url(images/background.jpg);
background-repeat:repeat-x;
width:100%;
height:100%;
}

#Container{
width:855px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
background:url(images/3back.jpg);
background-repeat:repeat;
}

#Header{
width:855px;
height:30px;
border-bottom:#000000 4px solid;
background-image:url(images/headerback.jpg);
padding-top:240px;
text-indent:12px;
}

#LeftAndContent{
width:685px;
float:left;
}

#Left{
float:left;
width:152px;
background:#000000;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding-left:15px;
}

#Content{
width:512px;
background:#FFFFFF;
float:right;
padding-left:6px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#4b4b4b;
}

#Right{
width:165px;
float:right;
background:#FFFFFF;
border-left:#dedede 1px solid;
padding-left:4px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
height:100%;
}

Any idea where I'm going wrong?
D

It works in FF if I assign a height, but I want the height variable since some posts may be longer than the value.

Rep points for the fix.