Hi,
I am having a problem with my CSS whereby the right hand column in a 2 column layout is extending beyond the footer.
I have tried playing with the clear: both; property but I cannot get it to work..
the second column has the id column2 both columns use the class column. The footer html has the id footerWrapper
Both columns and footer are div tags.
My CSS (abridged):
.column {
width: 49%;
}
#column2 {
width: 50%;
position: absolute;
top: 0px;
margin-left: 50%;
float: left;
}
#footerWrapper {
background-color: #333333;
border-top: 2px #FF6600 solid;
color: #666;
}
HTML abridged:
<!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=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="mainColumns">
<div id="mainContainer"><div class="mainWrapper">
<h1>Title</h2>
</div>
<!-- start panels -->
<div class="panels">
<div class="column">
<h2><img src="../lib/icons/newspaper.png" width="16" height="16">Title</h2>
<div>
<p>content</p>
</div>
<p></p>
<h2><img src="../lib/icons/rainbow.png" width="16" height="16">Title</h2>
<div>
<p>content</p>
</div>
<p></p>
<h2><img src="../lib/icons/rainbow.png" width="16" height="16">Title</h2>
<div>
<p>content</p>
</div>
</div>
<div class="column" id="column2">
<h2><img src="../lib/icons/newspaper.png" width="16" height="16">Title</h2>
<div>
<p>content</p>
</div>
<p></p>
<h2><img src="../lib/icons/rainbow.png" width="16" height="16">Title</h2>
<div>
<p>content</p>
</div>
<p></p>
<h2><img src="../lib/icons/rainbow.png" width="16" height="16">Title</h2>
<div>
<p>content</p>
</div>
</div>
</div>
<!-- end panels -->
<div class="mainWrapper"></p>
</div></div>
<div id="sideBar"> </div>
</div>
<div id="footerWrapper">
<div id="footer">
<h6></h6>
</div>
</div>
</body>
</html>