| | |||||
| ||||||||
| Programming PHP, Perl, Ruby on Rails, AJAX, HTML, XHTML, CSS, JavaScript, MySQL and any other coding topics. |
![]() |
| | LinkBack | Thread Tools |
| | THREAD STARTER #1 (permalink) |
| Senior Member Join Date: Dec 2004 Location: Burlington, Vermont
Posts: 1,048
![]() ![]() ![]() | 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 |
| |
| | THREAD STARTER #3 (permalink) |
| Senior Member Join Date: Dec 2004 Location: Burlington, Vermont
Posts: 1,048
![]() ![]() ![]() | 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> ????: 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%;
} 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. |
| |