Forum Moderators: not2easy
Basically, my page is just a header and 4 columns with 2 other div boxes with absolute positioning, one inside the header and one in the leftmost column. The 3 columns to the right of the left "navigation" column are in their own div container. The body is centered and has a 808 pixel width, and I'm using the faux columns cheat.
Using Ryan Fait's method, the container I tried wrapped everything in (from before the header to the last of the content) only goes to 100% height before scrolling to see the column's content. So, in other words, if any of my 3 content columns on the right stretch the page below the full-screen, the footer will cut into the content.
I tried just placing the footer with "bottom: 0" inside the container for the 3 columns, which SHOULD work... but the container itself is doing the same thing as the original wrapper I tried using. The 3 column's container is not stretching with the 3 columns inside of it as they get longer, so the footer interrupts the columns instead of being below them.
My CSS:
* {
margin: 0;
padding: 0;
}html, body {
position: relative;
background: #7d7d7d url(fauxbg.png) repeat-y 50% 0;
width: 808px;
height: 100%;
margin: 0 auto 0 auto;
}
#header{
width: 808px;
height: 215px;
background: url(csssprites2.png);
}
#nav{
position: absolute;
top:220px;
left: 7px;
width: 164px;
}
#columnimg{
max-width: 190px;
padding-bottom: 15px;
}
#cont{
position: relative;
top: 0px;
left: 195px;
text-align: left;
width: 600px;
height: 100%;
background-color: blue;
}
#column1{
position: absolute;
top: 0;
left: 0;
text-align: center;
width: 200px;
}
#column2{
position: absolute;
top: 0;
left: 200px;
text-align: center;
width: 200px;
}
#column3{
position: absolute;
top: 0;
left: 400px;
text-align: center;
width: 200px;
}
#titlebar{
text-align: center;
padding-top: 3px;
position: absolute;
top:178px;
left:189px;
width:612px;
height:24px;
}
#psubcat{
position: absolute;
text-align: right;
top: 38px;
left: 0;
width: 164px;
}
#footer{
position: absolute;
text-align: center;
bottom: 0;
left: 0;
width: 600px;
}
HTML:
<body>
<div id="header">
<div id="titlebar">
<h5>Portfolio - </h5><h6>Logos and Etcetera</h6><h3> - <a class="subcat" href="webpages.html">Webpages</a> - <a class="subcat" href="wallpapers.html">Wallpapers</a></h3>
</div>
</div><div id="nav">
<a href="index.html">Home</a><br />
<a href="portfolio.html">Portfolio</a><br />
<div id="psubcat">
<h4>Logos and Etcetera</h4><br />
<a class="subcat" href="webpages.html">Webpages</a><br />
<a class="subcat" href="webpages.html">Wallpapers</a>
</div>
<br /><br />
<a href="contact.html">Contact</a><br /><br />
<center>
<h1>Click an image for a larger view >></h1><br /><br />
</center>
</div><div id="cont">
<div id="column1">
<img id="columnimg" src="image.jpg" />
</div>
<div id="column2">
</div>
<div id="column3">
</div>
<div id="footer">Footer Footer Footer</div>
</div>
I have more images in column1 (enough to stretch the page so you'd have to scroll a bit) than I show in the code that I omitted to save space here. All the code was verified at the W3C CSS validation page.
I'd rather not have a footer if it's going to intersect these columns... is there anything I can do? Setting the padding wont work unless I set it differently for each page depending on what's in it, and it'd be quite annoying if content gets added.
So I'd suggest to leave you columns as position:static (which is the default)
float them instead
Leacve your footer position static as well, do not float it and give it clear:both that way it will stay under the columns no matter how long they get.
Can I still have my container with relative position?
This still isn't working even after removing the absolute positioning; the container still isn't stretching with the columns.
#footer{
clear: both;
}#column{
float: left;
text-align: center;
width: 200px;
}
I'm now looking into the clearfix stuff, it seems to be the exact solution I'm looking for.
EDIT: clearfix did the trick!
Thank you so much for your help :D
