The problem is that I have a very long left hand navigation menu which exceeds the height of the main content area on the right. The footer only goes as far down as the main content and does not appear at the bottom of the left hand menu where is should. I know that getting footers at the bottom of the page is a bit of a common problem with CSS layouts and I did look for some solutions but I could not get them to work. I'm pretty new to CSS and this is my first attempt at a tableless layout. Could any of you clever CSS guys take a look and see if you can point me in the right direction? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Title</title> <style type="text/css" media="all"> HTML{ margin: 0px; padding: 0px; } BODY{ margin: 0; padding: 0; background: #b4b4b4; } /***** Header and Main Area *******/ #container{ width: 720px; left: 50%; background: #7D638A; margin-left: -352px; position: relative; } #pageHeader { width: 720px; height: 117px; margin: 0; padding: 0; background: url(images/header.jpg); } #headerspacetop { height: 7px; width: 720px; margin: 0; padding: 0; overflow:hidden; background: url(images/dot-top.gif) repeat-x; } #headerspacebottom { height: 7px; width: 720px; margin: 0; padding: 0; overflow:hidden; background: url(images/dot-bottom.gif) repeat-x; } #headerspace { width: 720px; height: 20px; overflow:hidden; margin: 0; padding: 0; background: red; } /***** End Header and Main Area *******/ /******* Fonts, Text and Links *******/ P{ font: 9pt Arial, Verdana, serif; color: #807A73; text-align: left; text-indent: 10px; padding: 5px 5px 5px 5px; margin: 5px 5px 5px 5px;} a { color: #ff0000; text-decoration: underline; } a:visited { color: #ff0000; text-decoration: underline; } a:hover { color: #ff0000; background: #C8D5FB; text-decoration: none; } a:active { color: #ff0000; background: #C8D5FB; text-decoration: none; } /******* Enf Fonts, Text and Links ******/ /******** Main Content Boxes *******/ #mainContent{ width: 535px; margin: 0px 0px 0px 167px; padding: 0px 0px 5px 0px; background: #7D638A; } #contenido, #welcomeText, #exTra { width: 535px; margin: 5px 5px 25px 7px; border: solid 3px black; background: White url(images/main-back-top.jpg) repeat-x top; } /* Float Hack For Main Content Blocks to set minimum height for boxes so box will stretch to fit image*/ #clear { clear:both; height:1px; overflow:hidden; } .minset { height:143px; } .floathack { float:right; width:1px; } /* End Float Hack */ /* The Floating Image */ #contenidoA, #welcomeTextA, #exTraA { width: 100px; height: 143px; float: left; } #contenidoA{ background: url(images/main1.gif) no-repeat;} #exTraA{ background: url(images/main1.gif) no-repeat;} #welcomeTextA{ background: url(images/main1.gif) no-repeat;} /* End Floating Image */ /******* End main content boxes ******/ /******** Footer ******/ #footer{ width: 720px; height: 1px; background: #cfb35b; height: 36px; position: absolute; left: 0; background: white; } /********* End Footer **********/ /******** Right Menu ********/ #linkList { position: absolute; top: 156px; left: 3px; margin: 0px 0px 0px 0px; width: 164px; padding-bottom: 13px; background: #7D638A; } #linkList2 { font-size: 9pt; color: #BFB8AC; text-align: center; } ul{ list-style-type: none; padding: 0px 0px 0px 0px; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; float: center; clear: center; display: inline-block; } #lcategories { padding: 0px 0px 0px 0px; background: White url(images/main-back-top.jpg) repeat-x top; border-left: 4px solid Black; border-right: 4px solid Black; border-top: 8px solid Black; border-bottom: none; } #lfoot { height: 45px; width: 164px; background: White; /***Normally an Image for background ***/ } #lfoot p { text-align: right; padding-top: 20px; font-size: 12px; margin: 0px 5px 0px 0px; font-weight: normal; } #lfoot a { font-weight: normal; } #lcategoriestop { margin: 0px 0px 10px 0px; border-bottom: solid 3px black; } #lcategoriestop { background: url(images/category-image.jpg) no-repeat top; height: 30px; } #linkList a:visited { font: 9pt Arial, Verdana, serif; color: #ff0000; font-weight: bold; text-decoration: none; } #linkList a { font: 9pt Arial, Verdana, serif; color: #ff0000; font-weight: bold; text-decoration: none; } #linkList a:active { color: #ff0000; background: #C8D5FB; } #linkList a:hover { color: #ff0000; background: #C8D5FB; } /******** End Right Menu *******/ </style> </head> <body> <div id="container"> <div id="pageHeader"></div> <div id="headerspacetop"></div> <div id="headerspace"></div> <div id="headerspacebottom"></div> <div id="linkList"> <div id="linkList2"> <div id="lcategories"> <div id="lcategoriestop">category</div> <ul> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> <li>Long List</li> </ul> </div> <div id="lfoot"> <p><a href="/">ADVERT LINK </a></p> </div><br /> </div></div> <div id="mainContent"> <div id="contenido"><div class="floathack minset"></div> <div id="contenidoA"></h3></div> <h3>Welcome to Site</h3> <p class="p1">Some Text</p> <p class="p1">Some Text</p> <p class="p1">Some Text</p> <p class="p1">Some Text <a href="/"></a></p> <p class="p1">Some Text </p> <div id="clear"></div> </div> </div> <div id="mainContent"> <div id="contenido"><div class="floathack minset"></div> <div id="contenidoA"></h3></div> <h3>Welcome to Site</h3> <p class="p1">Some Text</p> <p class="p1">Some Text</p> <p class="p1">Some Text</p> <p class="p1">Some Text <a href="/"></a></p> <div id="clear"></div> </div> </div> <div id="footer"> <div align="center">FOOTER</div> </div> </div> </body> </html> Code (markup):
Absolute positioned elements are not in the flow. No other element is aware of it, nor is the AP element aware of any other element. To use the layout method you've chosen, you must guarantee that the AP column is shorter than the in-the-flow element. If you cannot make that guarantee, you should use floats to establish the columns. Curiosity: WTF is this all about? /* Float Hack For Main Content Blocks to set minimum height for boxes so box will stretch to fit image*/ #clear { clear:both; height:1px; overflow:hidden; } Code (markup): cheers, gary
Thanks - I can see what you are saying there. It basically means the code I have in place is restricted and I need to go back to the drawing board. I found this: http://www.pmob.co.uk/temp/2colmac.htm which should be right for it. You can't really see it in the example I gave but on the full site there will be a small picture in the top left of the content box. If the content within the content box is too small then the content box does not stretch over the picture and the picture sticks out the end. The float hack prevents that from happening meaning the box will have a minimum height greater than the picture even if content is lacking.
I would be surprised if it works as you expect. The Holly Hack combined with {overflow: hidden;} will not expand the box, but will simply hide all height beyond the 1%. cheers, gary N.B. It is not polite to post the same question to multiple forums.