1. Home
  2. Forums Index
  3. Browser Side / CSS 11:41 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

3 column header footer layout

what is the right approach for fixing this?

         

HelenDev

12:21 pm on Mar 21, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I have inherited some code which makes the above layout. The problem however is that the side menus overlap the footer if they are longer than the central column. I don't know which column will be longest for any given page.

I know this subject has been discussed a few times, but can anyone tell me what is the right approach to fix this code?

Here is the code...

stylesheet:

BODY {
FONT-SIZE: 80%; MARGIN: 8px; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #ffffff
}
#head {
WIDTH: 100%; HEIGHT: 139px
}
#centre {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; MARGIN: 15px 24% 0px; BORDER-LEFT: #009966 1px solid; PADDING-TOP: 5px
}
#left {
PADDING-RIGHT: 5px; PADDING-LEFT: 0px; LEFT: 8px; PADDING-BOTTOM: 5px; WIDTH: 23%; PADDING-TOP: 5px; POSITION: absolute; TOP: 155px
}
#right {
PADDING-RIGHT: 0px; PADDING-LEFT: 5px; RIGHT: 8px; PADDING-BOTTOM: 5px; BORDER-LEFT: #009966 1px solid; WIDTH: 23%; PADDING-TOP: 5px; POSITION: absolute; TOP: 155px
}
#foot {
PADDING-RIGHT: 0px; BORDER-TOP: #009966 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 5px; TEXT-ALIGN: center
}

page code:

<BODY
<DIV id=head>
header header header header header header header header header header header header header header header header header header header header header header header header header header header header header header header header header header header header header header header header header header header header header
</DIV>
<DIV id=left> left menu<br />
left menu<br />
left menu<br />
left menu<br />
left menu<br />
left menu<br />
left menu<br />
</DIV>
<DIV id=centre>
centre column centre column centre column centre column centre column centre column centre column centre column centre column centre column centre column centre column centre column centre column centre column centre column
</DIV>
<DIV id=right> right menu<br />
right menu<br />
right menu<br />
right menu<br />
right menu<br />
right menu<br />
</DIV>
<DIV id=foot>
footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer
</DIV>

</BODY></HTML>

MatthewHSE

1:40 pm on Mar 21, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The only way to get the footer consistently at the bottom of the page with no overlap, if you don't know which column will be longest, is to find some way of floating ALL the column div's and then use 
clear:both
on the footer. The way you float the columns will depend on what order you want to use for the source code, and how simple or complex you are willing to go.

HelenDev

10:42 am on Mar 29, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Cheers Matthew :)

Longhaired Genius

11:15 am on Mar 29, 2005 (gmt 0)

10+ Year Member



I posted my personal solution to this problem in this thread: [webmasterworld.com...]

HelenDev

10:58 am on Apr 5, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Cheers for that, it looks really good :)

Do you know if there are any known issues/problems with your solution? For example I have tried it in ie5, 6 and Firefox and it all looks good. I don't have access to testing on a Mac though - do you know if it works OK on a Mac?

HelenDev

8:29 am on Apr 6, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Been playing around with this layout some more...

I notice however that if the divs have stuff in them which is wider than will fit, the right hand column for example will move underneath the first two columns.

Any way to get around this?

Longhaired Genius

11:21 am on Apr 6, 2005 (gmt 0)

10+ Year Member



Explorer on a Mac exhibits the same behaviour you noted; this is an IE bug. This situation should be taken care of with the CSS property overflow [w3.org], but IE does not support overflow. Personally, I don't think it's a showstopper, after all, the content is still visible. "overflow: scroll" will add scrollbars to a too-small div in Firefox and Opera. I don't know of any other problems, thanks for pointing this one out.

MatthewHSE

11:33 am on Apr 6, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Nice design, Longhaired Genius. It kind of makes me into a liar or a know-nothing, though, unless I clarify my comment about floats! ;) What I was thinking of was a CSS-Positioning-With-Footer design that is source-ordered. Add that "source-ordered" part and floats really are the only way to get it done. But source-ordering isn't always important, and your design has the advantage of simplicity.

HelenDev, have you looked into using IE7 [dean.edwards.name] to overcome the overflow problem?

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 11:41 pm May 1, 2026