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 4 of 4
  1. #1
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts

    footer in multi-columnar CSS

    I have tried to simplify this HTML page down to a reasonable level that will still illustrate my problem.

    I have purposely given the various <DIV>s colored borders and interiors to make them easy to find and see. In the actual page, none would have any borders or background colors.

    The HTML shown here displays the same--except for the obvious font size differences, etc.--in MSIE and FF. It works adequately.

    The only "TRICK" is in the placement of the footer. Note that it is *INSIDE* the <div id="Content"> where the Content is the right column of the page. By using "left: -250px;" this effectively moves the full-width footer to the left side of the page, as desired, while making sure it's at the bottom of everything.

    *** BUT ***

    But on SOME pages, where I want to use the same CSS, the Navigation DIV is larger (taller) than the Content DIV. And then, not surprisingly, the footer covers over part of the Navigation DIV. It's clearly no longer a real footer.

    It wouldn't be a big deal to adjust accordingly--put the footer into the Navigation DIV with a left of 0px--except that I can NOT predict when this situation will happen! (The Navigation height is consistent, but the Content height will vary widely.)

    So...the question is simple: What is the right way to use CSS to force that footer to the bottom under all circumstances???

    (You can either drop all but one line of the content or add stuff to the nav to see what I'm talking about if it's not obvious.)

    Yes, I tried several combinations of "position: relative;" in place of all the "position: absolute;" specs. None helped. Some (not surprisingly) made it worse (that is, would put the content below the nav, etc.).

    Will be happy to add any enclosure divs or whatever to make this come out right.

    Thanks for looking.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    
    <style>
    div#Head       { position: absolute; top: 0px; left: 0px; width: 800px; height: 110px; 
                     border: solid blue 2px; background-color: lightblue; }
    div#Main       { position: absolute; top: 110px; left: 0px; width: 800px;
                     border: solid red 2px; background-color: pink; }
    div#Navigation { position: absolute; top: 0px; left: 0px; width: 200px; vertical-align: top; 
                     border: solid green 2px; background-color: lightgreen; }
    div#Content    { position: absolute; top: 0px; left: 250px; width: 550px; vertical-align: top;
                     border: solid orange 2px; background-color: yellow; }
       
    div#foot       { position: relative; bottom: 0px; left: -250px; width: 800px;
                     border: solid black 2px; background-color: lightgrey; }
    </style>
    </head>
    <body>
    <div id="Head"><br>This goes in the head</div>
    <div id="Main">
        <div id="Navigation">
            <ul>
            <li>Various</li>
            <li>Nav</li>
            <li>Links</li>
            <li>Go</li>
            <li>Here</li>
            </ul>
        </div><!-- navigation -->
        <div id="Content">
            Lots of content lines here with this one especially long line to see what happens...word wrap at right place or not?<br><br>
            Lots of content lines here<br><br>
            Lots of content lines here<br><br>
            Lots of content lines here<br><br>
            Lots of content lines here<br><br>
            Lots of content lines here<br><br>
            Lots of content lines here<br><br>
            Lots of content lines here<br><br>
            Lots of content lines here<br><br>
            Lots of content lines here<br><br>
            Lots of content lines here<br><br>
            Lots of content lines here<br><br>
            Lots of content lines here<br><br>	
            ** END OF CONTENT **
            <div id="foot">footer goes here</div>
        </div><!-- content -->
    </div><!-- main -->
    </body>
    </html>
    As a side note, why does MSIE make the width of the Content div 800 pixels when it's clearly specified as 550px?? Mind you, it makes the width of the text content therein only 550px, and since I won't be using border or backgroud, it's quite usable for me, as is. But it's sure weird.

    p.s.: Please, please, save me from using a <TABLE> instead of <DIV>s. <grin/>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    It would figure that right after I post I see another message with same theme.

    So I looked at
    http://nopeople.com/CSS/full-height-3column/index.html

    And it doesn't seem to help.

    Here is a clone of the HTML/CSS on that page, excepting with very little text in the center column and a greatly expanded left-side column.

    And, as you can see, the footer is in entirely the wrong place *IN FIREFOX*. (Seems to be okay in MSIE 6).

    Here's hoping Excavator will set us all straight on this one!

    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=utf-8" />
    <meta name="" content="authored by http://www.nopeople.com/Design/" />
    <meta name="" content="Sticky Footer by Ryan Fait - http://ryanfait.com/" />
    <title>Full height 3-column with header and footer</title>
    <style type="text/css">
    html, body{
    	height: 100%;
    	text-align: center;
    	font: 14px "Comic Sans MS";
    }
    * {
    	margin: 0;
    	padding: 0;
    }
    #wrap {
    	width: 1000px;
    	min-height: 100%;
    	height: auto !important;
    	height: 100%;
    	margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
    	text-align: left;
    	background: url(column_back.gif) repeat-y;
    }
    #header {
    	width: 1000px;
    	height: 150px;
    	background: #666666;
    }
    #lcol {
    	width: 200px;
    	float: left;
    	padding: 5px 0 0 0;
    }
    #content {
    	margin: 0 200px 0 200px;
    	padding: 5px 0 0 0;
    }
    #rcol {
    	width: 200px;
    	float: right;
    	padding: 5px 0 0 0;
    }
    #footer, #push {
    	width: 1000px;
    	height: 50px;
    	margin: 0 auto;
    	background: #00FF00;
    }
    #push {background:none;}
    p {
    	margin: 5px;
    }
    .statement {
    	font-family: "Comic Sans MS";
    	font-size: 1.2em;
    	color: #666666;
    	margin-bottom: 10px;
    	}
    </style>
    </head>
    <body>
    <div id="wrap">
    <div id="header"></div>
    			<div id="lcol">
    				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    				   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
    				   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
    				   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
    				   sea takimata sanctus est Lorem ipsum dolor sit amet.
    				</p>
    				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    				   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
    				   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
    				   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
    				   sea takimata sanctus est Lorem ipsum dolor sit amet.
    				</p>
    				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    				   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
    				   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
    				   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
    				   sea takimata sanctus est Lorem ipsum dolor sit amet.
    				</p>
    				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    				   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
    				   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
    				   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
    				   sea takimata sanctus est Lorem ipsum dolor sit amet.
    				</p>
    				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    				   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
    				   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
    				   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
    				   sea takimata sanctus est Lorem ipsum dolor sit amet.
    				</p>
    
    			<!--closes lcol --></div>
    					<div id="rcol">
    						<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    						   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
    						   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
    						   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
    						   sea takimata sanctus est Lorem ipsum dolor sit amet.
    						</p>
    					<!--closes rcol --></div>
    <div id="content">
    	<p class="statement">This is full of text to show that it does not break. Take the 
    	text out and it's a full height 3-column layout with a header and 
    	footer. 
    	To use this on your own site all you would really need is a different
    	background image to make your columns.
    	</p>
                <div id="push">
                    <!--this inline style is only to over-ride the white background on 
                    #footer, #push that works fine when the content pushes it all the way down.-->
                </div>
    <!--closes content--></div>
    <!--closes wrap--></div>
    <div id="footer"><p>some footer text here</p></div>
    </body>
    </html>
    Last edited by Old Pedant; 03-09-2009 at 07:01 AM. Reason: show that Excavator code doesn't work for this

  • Users who have thanked Old Pedant for this post:

    Excavator (03-09-2009)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Old Pedant View Post

    Here is a clone of the HTML/CSS on that page, excepting with very little text in the center column and a greatly expanded left-side column.

    And, as you can see, the footer is in entirely the wrong place *IN FIREFOX*. (Seems to be okay in MSIE 6).

    Here's hoping Excavator will set us all straight on this one!
    Hello Old Pedant,
    That's an interesting goof. Sorry about that When I tested it I never made a side column the long one.
    I should not have put #push in #content. It needs to be moved to #wrap so any of the 3 columns can push on it. Add clear:both; to it, to deal with the floats, and it works.

    I've updated the demo site with these changes.Here's the link again - http://nopeople.com/CSS/full-height-3column/index.html

    and the demo that was based on is at -http://nopeople.com/CSS/full-height-layout/index.html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Old Pedant (03-09-2009)

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Perfect.

    I had actually tried moving PUSH, but I didn't add the "clear: both;".

    Thanks, again.


  •  

    Posting Permissions

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