SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard
    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">&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. :]

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 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&#37;;
      left: 0;
    }

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •