homepage Welcome to WebmasterWorld Guest from 54.204.67.26
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Accredited PayPal World Seller

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
100% Height Div and Footer Positioning Problem
footer won't slide down as content expands
leebuddy




msg:3611171
 4:06 pm on Mar 26, 2008 (gmt 0)

If my content in my content div expands beyond the browser window, the footer won't slide down below it. It stays stuck at the original bottom of browser window location. I don't know what to do. Help?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}

body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
text-align: center;
background-color:#434343;
color:#FFFFFF;
}

div#MainContainer {
position: relative;
width: 955px;
min-height: 100%;
margin-left: auto;
margin-right: auto;
text-align: left;
border-right-style:solid;
border-right-width:1px;
border-right-color:#666666;
border-left-style:solid;
border-left-width:1px;
border-left-color:#666666
}

div#Header {
height: 215px;
width: 100%;
padding: 0;
margin: 0;
background-color:#00FF00
}

div#SideBarContainer {
position:absolute;
width: 250px;
height: 100%;
right: 0px;
top: 0px;
}

div#SideBarTopMargin {
width: 250px;
height: 215px;
}

div#SideBarBottomMargin {
position:absolute;
bottom: 0px;
height: 40px;
}

div#SideBar {
padding: 10px;
background-color:#FF0000
}

div#ContentContainer {
position:absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
margin-right: 250px;
}

div#ContentTopMargin {
width: 100%;
height: 245px;
}

div#ContentBottomMargin {
position:absolute;
bottom: 0px;
height: 40px;
}

div#Content {
margin-right: 250px;
background-color:#FFFF00
}

div#ContentInnerTube {
padding: 10px;
}

div#NavBar {
height: 30px;
background-color:#0000FF
}

div#Footer {
position: absolute;
width: 100%;
height: 40px;
bottom: 0px;
background-color:#FF66FF
}
</style>
</head>

<body>
<div id="MainContainer">
<div id="Header">Header</div>

<div id="SideBarContainer">
<div id="SideBarTopMargin"></div>

<div id="SideBar">Sidebar</div>

<div id="SideBarBottomMargin"></div>
</div>

<div id="NavBar">NavBar</div>

<div id="ContentContainer">
<div id="ContentTopMargin"></div>

<div id="Content">
<div id="ContentInnerTube">
Content
</div>
</div>

<div id="ContentBottomMargin"></div>
</div>

<div id="Footer">Footer</div>

</div>
</body>
</html>


 

Mathieu Bonnet




msg:3611200
 4:26 pm on Mar 26, 2008 (gmt 0)

div#Footer {
position: absolute;
[...]
}

Remove this. If it is absolutely positioned, it won't move because of other blocks. It's not part of the normal flow anymore.

leebuddy




msg:3611235
 4:48 pm on Mar 26, 2008 (gmt 0)

Ok, but if there isn't much content on the page, the margin no longer sits at the bottom of the page... How can that problem be solved, too?

Mathieu Bonnet




msg:3613285
 1:34 pm on Mar 28, 2008 (gmt 0)

Ok, but if there isn't much content on the page, the margin no longer sits at the bottom of the page... How can that problem be solved, too?

Do you really want to keep the footer there...? It does not seem very important to me (and the content is probably longer, most of times).

If you really want to, I guess JavaScript should be the way to go.

Calculate the height of your whole document, and if it is less than the browser window inner height, then position your footer absolutely, so that it it pushed down, to the bottom of the window. (And if you change the content, with AJAX, or if the content width is not fixed, and its height can increase, if shrinked horizontally, then resets the position setting, on these changes).

A CSS solution would be to use {position:fixed;} for your footer, and use some bottom margin, for the content above, so that when you scroll to the bottom of the page (when the content is longer than the browser window height), the footer does not cover the bottom of your content.

With this solution, however, your footer will always be displayed, at the bottom of the screen. If a user has a small screen (including handhelds), or uses large fonts, the footer might take too much space.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved