Forum Moderators: not2easy
I have 2 main components in my page. The left menu bar and the content section.
My left menu bar is on absolute position. So, it is floating.
And my content section is positioned using CSS.
My problem now is that when the stuff inside the content section is too short, the footer I added at the end will get blocked by the left menu bar, which is floating above it.
So now how do I position my footer to appear after the left menu bar or the content section, depending on which one is longer.
And can someone explain to me what does this mean?
body>#Menu {width:150px;}The following would be my CSS with the problem...
#Content {
margin:0px 50px 50px 200px;
padding:10px;
}#Menu {
position:absolute;
top:240px;
left:15px;
width:172px;
padding:10px;
background-color:#eee;
border:1px dashed #999;
line-height:17px;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:150px;
}
}
#Footer {
font-size:11px;
background-color: #eee;
text-align: left;
padding:0px 0px 0px 50px;
margin:1000px 0px 0px 0px;
border-style:solid;
border-color:black;
border-width:1px 0px;
line-height:11px;*/
}
My left menu bar is on absolute position. So, it is floating.
Actually, it isn't floating. Absolute positioning and floating are two different (and mutually exclusive) things. You've used absolute positioning, when in fact what you need is float.
The problem is that absolute positioning pulls an element entirely out of the document flow so that it has NO interaction with other elements on the page. This means your menu cannot influence the location of the footer.
You need to position your layout in such a way that both the menu and the main content divs are capable of pushing the footer down. To do this, you need to abandon the use of absolute positioning.
Kysmiley suggested one way (the use of a float and a clearing element); I'll suggest another equivalent method: the use of floats with a container div (and no clearing element).
Basically, you'll want to float the menu, apply a margin to the main content that is (a) on the same side as the menu and (b) the same width as the menu. Wrap both divs in a container and float it, too. This will force the container to expand and contain the float.
If you then place your footer after this container div with a clear:left, it will stick to the bottom of that. Since you've set up the container to enclose the float, both divs (menu and content) will affect the height of the container div, pushing the footer below whichever one is tallest.
Here's some code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Two Columns</title>
<style type="text/css">
*{margin:0;padding:0;}
#container{
float:left;
width: 800px; /*or whatever*/
background: #789;
}
#menu{
float:left;
width: 150px;
background: #456;
}
#content{
margin-left: 150px;
}
#footer{
clear:left;
width: 800px;
background: #123;
}
</style>
</head>
<body>
<div id="container">
<div id="menu">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div id="footer">
<p>Footer text.</p>
</div>
</body>
</html>
Adjust the amount of text in #content or links in #menu to see how the footer sticks to the bottom of either one.
cEM
