SitePoint Sponsor |
|
User Tag List
Results 1 to 3 of 3
-
Aug 22, 2007, 00:58 #1
- Join Date
- May 2003
- Location
- Berlin, Germany
- Posts
- 1,829
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Make Footer full width in this 3col fixed layout
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Your Page Title Here</title> <style type="text/css" media="screen">@import url("css/noodle_real.css");</style> <style type="text/css"> html,body{ margin:0; padding:0; border:0; /* \*/ height:100%; /* Last height declaration hidden from Mac IE 5.x */ } body{ background:#EEEEEE; min-width:782px; text-align:center; } .clear{ clear:both; height:1px; overflow:hidden; line-height:1%; font-size:0px; margin-bottom:-1px; } * html .clear{height:auto;margin-bottom:0} #fullheightcontainer{ margin-left:auto; margin-right:auto; text-align:left; position:relative; width:782px; /* \*/ height:100%; /* Last height declaration hidden from Mac IE 5.x */ } #wrapper{ min-height:100%; /* \*/ height:100%; /* Last height declaration hidden from Mac IE 5.x */ border-right:1px solid #000000; border-left:1px solid #000000; background:#FFCCCC; } #wrapp\65 r{ height:auto; } /* \*/ * html #wrapper{ height:100%; } /* Last style with height declaration hidden from Mac IE 5.x */ #outer{ z-index:1; position:relative; margin-left:150px; width:478px; border-right:1px solid #000000; border-left:1px solid #000000; background:#ADD8E6; /* \*/ height:100%; /* Last height declaration hidden from Mac IE 5.x */ } * html #outer{ width:480px; w\idth:478px; } #float-wrap{ width:478px; margin-right:-1px; float:left; display:inline; } #left{ width:152px; float:left; display:inline; position:relative; margin-left:-151px; } *>html #left{width:151px;} #container-left{ width:150px; } #right{ float:left; display:inline; width:152px; margin-right:-150px; margin-left:-1px; position:relative; } /* \*/ * html #right{ width:152px; margin-left:0px; margin-right:-500px; mar\gin-right:-152px; } /* Above style hidden from Mac IE */ #container-right{ /* \*/ width:150px; /* Above hidden from IE-Mac */ margin-left:3px; } /* \*/ * html #container-right{ fl\oat:right; di\splay:inline; margin-left:2px; mar\gin-left:0px; } /* Above style hidden from Mac IE */ /* \*/ * html #left{margin-right:-3px;} /* Above style hidden from Mac IE */ #center{ width:478px; float:right; display:inline; /* \*/ margin-left:-1px; /* Hidden from IE-mac */ } #clearheadercenter{ height:72px; overflow:hidden; } #clearheaderleft{ height:72px; overflow:hidden; } #clearheaderright{ height:72px; overflow:hidden; } #clearfootercenter{ height:52px; overflow:hidden; } #clearfooterleft{ height:52px; overflow:hidden; } #clearfooterright{ height:52px; overflow:hidden; } #footer{ z-index:1; position:absolute; clear: both; width:782px; height:52px; overflow:hidden; margin-top:-52px; } #subfooter1{ background:#FFFFCC; text-align:center; margin:0 1px; height:50px; } #header{ z-index:1; position:absolute; top:0px; width:782px; height:72px; overflow:hidden; } .outer_horiz_border, .sb_outer_horiz_border{ background:#000000; height:1px; overflow:hidden; font-size:0px } #subheader1{ background:#FFFFCC; text-align:center; margin:0 1px; height:70px; } #gfx_bg_middle{ top:0px; position:absolute; height:100%; overflow:hidden; width:478px; margin-left:150px; background:#ADD8E6; border-right:1px solid #000000; border-left:1px solid #000000; } * html #gfx_bg_middle{ display:none; } </style> <!--[if IE]> <style type="text/css"> #outer{word-wrap:break-word;} </style> <![endif]--> </head> <body> <div id="fullheightcontainer"> <div id="wrapper"> <div id="outer"> <div id="float-wrap"> <div id="center"> <div id="clearheadercenter"></div> <div id="container-center"> <p> This is the<br />Main Content<br /> </p> </div> <div id="clearfootercenter"></div> </div> <div id="left"> <div id="clearheaderleft"></div> <div id="container-left"> <p> This is the Left Sidebar<br /> </p> </div> <div id="clearfooterleft"></div> </div> </div> <div id="right"> <div id="clearheaderright"></div> <div id="container-right"> <p> This is the Right Sidebar<br /> </p> </div> <div id="clearfooterright"></div> </div> <div class="clear"> </div> </div> <div id="gfx_bg_middle"> </div> </div> <div id="header"> <div class="outer_horiz_border"> </div> <div id="subheader1"> <p> This is Sub-Header #1 (with Fixed Height) </p> </div> <div class="outer_horiz_border"> </div> </div> <div class="clear"> </div> <div id="footer"> <div class="outer_horiz_border"> </div> <div id="subfooter1"> <p> This is Sub-Footer #1 (with Fixed Height) </p> </div> <div class="outer_horiz_border"> </div> </div> </div> </body> </html>
is that possible using the above code?
Thanks in advance. :]
-
Aug 22, 2007, 01:41 #2
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
remove position: relative from #fullheightcontainer and add
Code:#footer{ z-index:1; position:absolute; clear: both; width:782px; height:52px; overflow:hidden; margin-top:-52px; width: 100%; left: 0; }
-
Aug 22, 2007, 09:17 #3
- Join Date
- May 2007
- Location
- Newcastle, Australia
- Posts
- 3,718
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
position:absolute;
clear: both;
You need to move the footer to outside the full height container, and remove absolute positioning. The .outer_horiz_border divs are unnecessary - borders can be applied direct to elements.
Try html :
Code:<div id="header"> <div id="subheader1"> <p> This is Sub-Header #1 (with Fixed Height) </p> </div> </div> <div class="clear"> </div> </div><!-- end fullheightcontainer --> <div id="footer"> <div id="subfooter1"> <p> This is Sub-Footer #1 (with Fixed Height) </p> </div> </div>
Code:#footer{ clear: both; height:50px; overflow:hidden; margin-top:-52px; position: relative; border-top: 1px solid #000000; border-bottom: 1px solid #000000; background-color: #FFFFCC; } #subfooter1{ text-align:center; margin:0 1px; height:50px; } #header{ z-index:1; position:absolute; top:0px; width:780px; height:70px; overflow:hidden; border-top: 1px solid #000000; background-color: #FFFFCC; left: 1px; border-bottom: 1px solid #000000; } #subheader1{ text-align:center; margin:0 1px; height:70px; }
Bookmarks