Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Jan 2005
    Posts
    470
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question Positioning at bottom of screen instead of page

    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:
    Code:
    <!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>

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    it's because your side bars are absolute positioned. try this:

    http://bonrouge.com/3c-hf-fixed.php
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Regular Coder
    Join Date
    Jan 2005
    Posts
    470
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New Coder
    Join Date
    Mar 2008
    Location
    Aurora, Illinois
    Posts
    61
    Thanks
    2
    Thanked 6 Times in 6 Posts
    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&#37; 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, 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.

    SitePoint also has a wonderful sticky post on the forums explaining how to achieve this without positioning as well:
    http://www.sitepoint.com/forums/show...41&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).

  • Users who have thanked Dan Schulz for this post:

    abduraooft (04-05-2008)

  • #5
    Regular Coder
    Join Date
    Jan 2005
    Posts
    470
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Dan Schulz View Post
    I have a complex example here
    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?

  • #6
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    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).
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  • #7
    Regular Coder
    Join Date
    Jan 2005
    Posts
    470
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mjlorbet View Post
    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.

  • #8
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    like i said, meant for future reference for others reading this post
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  • #9
    Regular Coder
    Join Date
    Jan 2005
    Posts
    470
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Thumbs up

    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •