Menu
Hello,
I’m creating a simple two column layout and there is a white gap between the left column and the footer. There is also a gap between the right. I would love the height to go down to the footer on the page. I tried height: 100%; margin-bottom: 0px; and some other things that didn’t work.
If you can take a look at the code and see what I have to do that will be great.
[CODE]body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 100%;
}
#content {
color: #333;
background-color: #b0ffa0;
padding-bottom: 20px;
margin-left: 250px;
padding: 10px;
}
#header {
color: #333;
width: 100%;
float: left;
background: #2c2c2c;
}
#header-text {
height: 70px;
font-size: 10px;
line-height: 10px;
float: left;
vertical-align: text-bottom;
color: #fff;
padding-left: 2px;
}
#header-ads {
padding-top: 5px;
width: 240px;
float: right;
}
#footer {
width: 100%;
clear: both;
color: #333;
background: #6B6659;
height: 25px;
}
#navigation {
float: left;
width: 100%;
color: #fff;
background: #000000;
height: 40px;
}
#leftcolumn {
float: left;
color: #333;
background-color: #ffffa0;
width: 250px;
}
#leftcolumn p {
padding: 5px;
}
[CODE]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>CSS Portal – Layout Generator</title>
<link rel=”stylesheet” type=”text/css” href=”226969.css” />
</head>
<body>
<div id=”wrapper”>
<div id=”header”>
<div id=”header-text”><br />
<h1>Company name</h1>
<h2>text goes here…</h2>
</div>
<div id=”header-ads”>
</div>
</div>
<div id=”navigation”>
<p>This is the Navigation</p>
</div>
<div id=”leftcolumn”>
<p>Left Column</p>
</div>
<div id=”content”>
<p>Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque vitae pede. Nam et augue. Sed a elit. Ut vel massa. Suspendisse nibh pede, ultrices vitae, ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit. </p>
</div>
<div id=”footer”>
<p>This is the Footer</p>
</div>
</div>
</body>
</html>