Make Footer full width in this 3col fixed layout

**DarkAngelBGE** · Aug 22, 2007, 00:58

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">&nbsp;</div>
    </div>
    <div id="gfx_bg_middle">&nbsp;</div>
  </div>
  <div id="header">
    <div class="outer_horiz_border">&nbsp;</div>
    <div id="subheader1">
      <p>
        This is Sub-Header #1 (with Fixed Height)
      </p>
    </div>
    <div class="outer_horiz_border">&nbsp;</div>
  </div>
  <div class="clear">&nbsp;</div>
  <div id="footer">
    <div class="outer_horiz_border">&nbsp;</div>
    <div id="subfooter1">
      <p>
        This is Sub-Footer #1 (with Fixed Height)
      </p>
    </div>
    <div class="outer_horiz_border">&nbsp;</div>
  </div>
</div>
</body>
</html>

I would like to make the footer full width, is that possible? I mean not only that the bg stretcheso ver to full width, but also that I can align the footer text to the very left of the page.

is that possible using the above code?

Thanks in advance. :]

**markbrown4** · Aug 22, 2007, 01:41

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&#37;;
  left: 0;
}

**Centauri** · Aug 22, 2007, 09:17

position:absolute;
clear: both;

clear won't work with absolute positioning ..

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">&nbsp;</div>
</div><!-- end fullheightcontainer -->
  <div id="footer">
    <div id="subfooter1">
      <p>
        This is Sub-Footer #1 (with Fixed Height)      </p>
    </div>
  </div>

and modified css (which also fixes the margin collapse in header and footer in FF) :

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;
}

The SitePoint Forums have moved.

User Tag List

Thread: Make Footer full width in this 3col fixed layout

Thread Tools

Display

Make Footer full width in this 3col fixed layout

Bookmarks

Bookmarks

Posting Permissions