NamePros
Welcome, Guest! Ready to make a name for yourself in the domain business? We welcome both the hobbyist and professional domainer to join the discussion as part of the NamePros community.

Click here to create your profile to start earning reputation for posting, and trader ratings for buying & selling in our free e-marketplace. Build your trader rating with each successful sale. Our system has tracked over 100,000 sales and counting!
FAQ & TOS Register Search Today's Posts Mark Forums Read

Go Back   NamePros.com > Website Development Discussion Forums > Programming
Reload this Page CSS issues: Divs even in height, borders

Programming PHP, Perl, Ruby on Rails, AJAX, HTML, XHTML, CSS, JavaScript, MySQL and any other coding topics.

Advanced Search


Closed Thread
 
LinkBack Thread Tools
Old 06-30-2006, 11:10 AM THREAD STARTER               #1 (permalink)
Senior Member
Join Date: Dec 2004
Location: Burlington, Vermont
Posts: 1,048
dan_Vt is a jewel in the roughdan_Vt is a jewel in the roughdan_Vt is a jewel in the rough
 



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
Tool Band Forum

For Sale: Co-Sign.com
dan_Vt is offline  
Old 06-30-2006, 12:36 PM   #2 (permalink)
Dan
Buy my domains.
 
Dan's Avatar
Join Date: Feb 2006
Posts: 2,796
Dan has a brilliant futureDan has a brilliant futureDan has a brilliant futureDan has a brilliant futureDan has a brilliant futureDan has a brilliant futureDan has a brilliant futureDan has a brilliant futureDan has a brilliant futureDan has a brilliant futureDan has a brilliant future
 


Autism Autism Autism Autism Autism Autism Autism
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 is offline  
Old 06-30-2006, 12:56 PM THREAD STARTER               #3 (permalink)
Senior Member
Join Date: Dec 2004
Location: Burlington, Vermont
Posts: 1,048
dan_Vt is a jewel in the roughdan_Vt is a jewel in the roughdan_Vt is a jewel in the rough
 



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(http://cdn.namepros.com/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:
????: NamePros.com http://www.namepros.com/programming/212264-css-issues-divs-even-height-borders.html
????: NamePros.com http://www.namepros.com/showthread.php?t=212264
Code:
body,html{
width:100%;
height:100%;
}

#Page{
background:url(http://cdn.namepros.com/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(http://cdn.namepros.com/images/3back.jpg);
background-repeat:repeat;
}

#Header{
width:855px;
height:30px;
border-bottom:#000000 4px solid;
background-image:url(http://cdn.namepros.com/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.
__________________
Vermont SEO
Tool Band Forum

For Sale: Co-Sign.com
dan_Vt is offline  
Closed Thread


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


Liquid Web Smart Servers  
All times are GMT -7. The time now is 08:35 AM.

Managed Web Hosting by Liquid Web
Domain name forum recommended by Domaining.com Powered by: vBulletin® Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.6.0 Ad Management plugin by RedTyger