CSS issues: Divs even in height, borders

dan_Vt · 06-30-2006, 10:10 AM

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 · 06-30-2006, 11:36 AM

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 · 06-30-2006, 11:56 AM

That worked in IE, but not FireFox...

Page:

Code:

<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:

Code:

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.

06-30-2006, 10:10 AM	#1 (permalink)
dan_Vt Senior Member Join Date: Dec 2004 Location: Burlington, Vermont Posts: 1,043 1,086.90 NP$ (Donate)	CSS issues: Divs even in height, borders 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 __________________ Vermont SEO Automotive SEO For Sale: Co-Sign.com \| Skiny.net \| CSIFAQ.com \| FuelBank.net \| Jibbar.com \|

06-30-2006, 11:36 AM	#2 (permalink)
Dan Buy my domains. Join Date: Feb 2006 Posts: 2,801 56.00 NP$ (Donate)	For the even heights, you need to use a background image that has their background. I'm not sure whats wrong with the borders.. :/

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)