Forum Moderators: not2easy
#main {
min-height: 100%;
width: 750px;
margin: 0 auto;
text-align: left;
background: #FFFFFF;
}
underneath this I have another 2 divs:
#bottombar {
height: 40px;
background-color: #FFFFFF;
width: 100%;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #3399FF;
text-align: center;
padding-top: 10px;
}
.bottomshadow {
background-image: url(images/bottomshadowslice.gif);
background-repeat: repeat-x;
background-position: bottom;
height: 9px;
width: 100%;
}
<html>
<div>...<!--this is the main div--></div>
<div class="bottomshadow"></div>
<div id="bottombar">...</div>
</html>
I was trying to make a bar at the bottom. I started reading some posts in this forum and got the impression its not easy to do this effectively.
However in IE it does look as I want it to, and in FF it does but only in certain window sizes, which is fairly useless.
What it does in FF is the bottombar sticks to the bottom of the window. When you resize the window it moves with it and the text within the bottom bar overlays the content of my main div, while the shadow goes under the main div.
When I take the min-height: 100% or height: 100% off of the main div the bottom bar goes up into the main div and looks stupid.
I don't want it to stick to the bottom of the window, although this is an interesting feature. All I want is for the bottom bar and the shadow to lie underneath the main div without the main div overflowing into it. I thought this would just happen automatically like it does in IE. I've tried absolute position bottom, but apparently this isn't possible.
Does anyone have any suggestions as to how I can simply make the bottom bar position vertically underneath the main div rather than sticking to the bottom of the window?
Thanks in advance for all posts.
PS
I may give it a try,
thanks for the link.
