PDA

View Full Version : Positioning at bottom of screen instead of page

bauhsoj
04-04-2008, 10:52 PM
I am testing a three column layout with a header and a footer using only CSS. Ordinarily it works fine but when the center column has less height than the left or right columns (due to amount of content in each) then the footer overlaps the left or right column as it positions itself to just below the center column.

Can anyone figure out why? I am baffled since the footer has an absolute position of left: 0px and bottom: 0px;

Here is my HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>page title</title>
<style type="text/css">
body {
margin:0px;
padding:0px;
height: 100%;
}
.left-col {
position: absolute;
width: 150px;
top: 130px;
left: 0px;
padding-left: 3px;
z-index: 2;
}

.right-col {
position: absolute;
width: 150px;
top: 120px;
right: 0;
padding-right: 3px;
z-index: 1;
overflow: hidden;
clear: both;
}

.center-col {
position: relative;
min-width: 300px;
min-height: 100%;
height: 100%;
z-index: 3;
top: 140px;
margin: 0px 160px 150px 170px;
text-align: left;
padding:5px;
}

.heading {
position: absolute;
left: 0px;
top: 0px;
}

.footer {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 0px;
z-index: 3;
padding-top: 25px;
margin: 0px;
display: block;
}

.footer-bar {
width: auto;
padding:10px 3px 3px 0px;
clear: both;
background-color: gray;
vertical-align: bottom;
text-align: center;
}
</style>
</head>
<body>
<div class="center-col">
center content<br />
center content<br />
center content<br />
center content<br />
</div>

<div class="left-col">
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
</div>

<div class="right-col">
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
</div>

<div class="heading">
head content
</div>

<div class="footer">
<div class="footer-bar">page bottom</div>
</div>
</body>
</html>
harbingerOTV
04-05-2008, 12:53 AM
it's because your side bars are absolute positioned. try this:

http://bonrouge.com/3c-hf-fixed.php
bauhsoj
04-05-2008, 01:14 AM
Making the columns relative proves to be a problem in that case. I need the center column to be in the document before anything else because that holds the document's main content. This is done for SEO purposes.
Dan Schulz
04-05-2008, 10:04 AM
I wouldn't use absolute positioning for this since they lead to very brittle layouts that cannot resize very easily without the layout breaking.

Instead, I'd set the html and body selectors to 100% height, then set a wrapping DIV around everything save the footer and give that a min-height of 100% (IE 6 and earlier would have to use height: 100% served via a hack since they not only don't understand min-height but treat height as min-height as well) and a negative bottom margin to pull the footer up (which will require a height of its own).

I have a complex example here (http://www.dan-schulz.com/temp/3columnlayout/), as well as an easier to understand version (without the side columns, which can be added by floating elements) of a 100% document height layout here (http://www.dan-schulz.com/for-others/ethics/template.html).

SitePoint also has a wonderful sticky post on the forums explaining how to achieve this without positioning as well:
http://www.sitepoint.com/forums/showpost.php?p=1243541&postcount=8

If you need help trying to implement this type of layout using floats and margins, feel free to post here and we'll be more than happy to help you out (and by we I mean myself and everyone else here at CodingForums.com).
bauhsoj
04-12-2008, 04:27 AM
I have a complex example here (http://www.dan-schulz.com/temp/3columnlayout/)

Your layout is terrific but adding a certain length of unspaced characters to the right column that is too long for it to fit causes the entire column to be flung to the lower lefthand side of the screen rather than wrapping the text within the column. This only happens in Internet Explorer 6, albeit. Though given that is still a very widely used browser it creates a real problem with this code.

Any ideas on a solution?
mjlorbet
04-12-2008, 05:38 AM
more clearly, the problem is that your side bars are absolutely positioned but your center column is relatively positioned (not just that you used absolute positioning at all, as it can be very useful in some cases). mix & match positioning schemes within a single parent element tends to give problems. if you set your positioning on your center element to absolute as well you'll have less problems. provided, of course, that you haven't already found a viable solution (which i'm sure you have, these guys are pretty good ;) )

at this point i suppose my post to be less than helpful given the context of the changes being suggested, but all the same, if some wayward traveler comes digging through the archives, i would hope they take note of the problems caused because of the absolute/relative positioning mismatch in the same container (body in this case).
bauhsoj
04-12-2008, 01:12 PM
more clearly, the problem is that your side bars are absolutely positioned but your center column is relatively positioned

At the moment I have his example full implemented so there is no absolute positioning.

Aside from the right column flying to the left of the screen when a word that is too long for it is entered, I also have the dilemma that somehow in my setup the right hand column is pushed over my about 3px off the side of the screen and I hand been able to fix that so far.
mjlorbet
04-12-2008, 03:36 PM
like i said, meant for future reference for others reading this post
bauhsoj
04-17-2008, 10:51 PM
I went with this one and after some tweaking it worked beautifully:
http://www.pmob.co.uk/temp/3colfixedtest_sourcenone.htm

Thanks for pointing me in the right direction!