2 replies [Last post]
maxve
Offline
newbie
Last seen: 17 years 19 weeks ago
Joined: 2004-01-02
Posts: 2
Points: 0

hey guys,

I'm making this layout, using a centered page, with 2 columns and a 100% width footer.. the problem is when the left column is shorter than the right one, the footer hovers over the right column... here the html and css:

<div id="main">

<div id="contentheader1">
Title
</div>

<div id="content1">
<p>
short text
</p>
</div>

<div id="sidebar">

<div id="sideheader1">
Sidebar
</div>
<p>more text</p>
<p>more text</p>
<p>more text</p>
<p>more text</p>
<p>more text</p>
</div>
</div>

<div id="bottom">
<div id="footer">
<p>some text</p>
</div>

#main
{
width: 697px;
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
position: relative;
clear: both;
min-height: 314px;
}
#footer
{
background-color: white;
border: 1px solid maroon;
width: 695px;
text-align: center;
margin-right: auto;
margin-left: auto;
padding-top: 5px;
padding-bottom: 5px;
}
#sidebar
{
position: absolute;
width: 224px;
border: 1px solid maroon;
border-top: none;
background-color: #eee;
padding: 0px 0px 10px 10px;
voice-family: "\"}\"";
voice-family: inherit;
margin-right: auto;
margin-left: 461px;
top: 0px;
min-height: 303px;
}

anyone has a solution??

thx

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 26 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Footer problem

It would be easier if you cleaned it up a bit as there seem to be many other divs, or provided us with a link. Quite often it can be something else that nobody can see, even a typing mistake. For example there is a missing ending </div>

1)Your "main" column also contains the "sidebar" column. That may be deliberate on your part am not sure.
2) The Sidebar is positioned absolutely, so it is taken out of the html flow, but still should be contained by the "main" div. But would suggest it is not, and is breaking outside its container. Therefore the footer would probably be forced up over the sidebar.
3) I would also think that you have only tested this with a small amount of text in the "main" div, because more text in "main" div should also flow under the absolute postioned box.

I would suggest you use the layout generator to get what you want http://www.csscreator.com/version2/pagelayout.php It has headers columns and a footer and will only take 5 minutes to do.

Regards
Day

The only way to learn is to do it yourself

maxve
Offline
newbie
Last seen: 17 years 19 weeks ago
Joined: 2004-01-02
Posts: 2
Points: 0

Footer problem

i cleaned it out a bit and it works now.. thx