Forum Moderators: not2easy
This side bar float to the right, while a content panel floats to the left.
Im trying to get the side bar to inherit the content panel's height, so the side bars background fills up as much of the page as the content panel.
Heres the code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Untitled Document</title>
</head>
<body>
<div id="wrapper">
<div id="menu">
<ul>
<li><a href="#" class="current">home</a></li>
<li><a href="#">latest</a></li>
<li><a href="#">about</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">login</a></li>
</ul>
</div>
<div style="clear: both;"></div>
<div id="header"></div>
<div id="content-head"></div>
<div id="content-wrapper">
<div id="content">
<div class="post">
<p class="title"><a href="#">The A120 towards Hertford</a></h2>
<p class="meta">Posted by <a href="#">Admin</a> on 27th September 2009</p>
<p class="body">This is a test blog about the a 120This is a test blog about the a 120This is a test blog about the a 120This is a test blog about the a 120This is a test blog about the a 120This is a test blog about the a 120This is a test blog about the a 120This is a test blog about the a 120This is a test blog about the a 120This is a test blog about the a 120This is a test blog about the a 120This is a test blog about the a 120</p>
</div>
<div class="post">
<h2 class="title"><a href="#">The A120 towards Hertford</a></h2>
<p class="meta">Posted by <a href="#">Admin</a> on 27th September 2009</p>
</div>
</div>
<div id="sidebar">
test<br />
test<br />
test<br />
test<br />
test<br />
</div>
<!-- end #sidebar -->
<div style="clear: both;"></div>
</div>
<div id="content-footer"></div>
</div>
</body>
</html>
AND THE CSS
body
{
padding:0;
margin:0;
background:url('bg.jpg') repeat #000;
font-family: Arial, Helvetica, sans-serif;
}
#wrapper
{
width:900px;
height:auto;
margin:0 auto 0 auto;
text-align:left;
}
#menu
{
height: 50px;
text-align: right;
margin:40px 0 10px 0;
background-image:url('banner.png');
background-repeat:no-repeat;
}
#menu ul
{
float: right;
text-align: right;
width: 450px;
list-style:none;
padding-top:11px;
}
#menu li
{
list-style:none;
display:inline;
margin:0 5px;
}
#menu li a
{
color:#FFFFFF;
text-transform:uppercase;
font-size:14px;
font-weight:bold;
text-decoration:none;
border-bottom:5px solid #b5b4b4;
cursor:pointer;
padding:0 0 1px 0;
}
#menu li a:hover
{
border-bottom:5px solid #008fd5;
color:#008fd5;
text-decoration:none;
}
#menu li a.current
{
border-bottom:5px solid #FFFFFF;
color:#FFFFFF;
text-transform:uppercase;
font-size:14px;
font-weight:bold;
text-decoration:none;
}
#header
{
width: 900px;
height: 200px;
background-image:url('title.png');
background-repeat:no-repeat;
}
#content-head
{
margin: 10px 0 auto;
background: url('top.png');
background-repeat:no-repeat;
height:20px;
}
#content-wrapper
{
width: 900px;
min-height: 100%;
margin: 0 auto;
padding: 0;
background-color: #FFFFFF;
}
#content
{
float: left;
width: 590px;
min-height: 100%;
padding: 0;
padding: 0 20px;
}
.post
{
font-family: Geneva, Arial, Helvetica, sans-serif;
}
.post .title
{
margin: 0 10px 0 0;
border-bottom: 1px dotted black;
}
.post .title a
{
font-size:24px;
font-weight:600;
border: none;
color: #330033;
text-decoration:none
}
.post .meta
{
margin-top: 1px;
padding-bottom: 3px;
font-size: 10px;
color: #999999;
}
.post .body
{
margin-top: -0px;
padding-bottom: 5px;
font-size: 14px;
color: #000000;
}
#sidebar
{
float: right;
width: 220px;
min-height: 100%;
border-left: 1px dotted black;
color: #787878;
padding: 0 20px;
}
#content-footer
{
background: url('bottom.png');
background-repeat:no-repeat;
height:20px;
}
#signForm
{
margin: 0;
padding: 0;
}
#signForm fieldset
{
width: 190px;
height:175px;
display: inline;
border: 0;
float: left;
margin: 0 0 0 1px;
padding: 0;
}
#signForm fieldset h3
{
margin-top: 0;
font-size: 34px;
}
#signForm fieldset div.meta
{
height:40px;
font-size: 17px;
font-weight: 600;
}
#signForm fieldset input
{
border: none;
float: left;
}
#signForm fieldset input.box {
font-size: 1.2em;
width: 180px;
height: 40px;
padding-top: 7px;
padding-left: 10px;
margin: 0;
background: #FFFFFF url(input2.png) no-repeat;
font-size: 20px;
vertical-align:middle;
}
#signForm input.submitbutton
{
border: none;
float: right;
margin-right: 27px;
width: 180px;
height: 40px;
background: #FFFFFF url(sign.png) no-repeat;
}
Thanks in advance
1. Google - "faux columns". The original "a list apart" article still holds up and explains it perfectly.
This original technique uses a background graphic to emulate equal sized columns.
2. See the "3 column layouts" in the layouts section of Stu Nichols' site CSSplay.
He uses an amazingly simple, yet brilliant, technique to emulate equal height columns with color (instead of graphic).
The element to inherit from must be the direct parent, and it must have an explicitly set height different from auto. And the child then can get the same height by using "height: 100%" .
But as bluesmandeluxe stated, faux columns or flexi-floats are the solutions you seek.
