SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard tgavin's Avatar
    Join Date
    Feb 2003
    Location
    FL
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    100% height (again)

    I know this has been covered here, but it's not working for me. I'm trying to get my container div to have 100% height and be centered. The centering works, but the height only stops where the viewport rendered, not to the full length of my content.



    So what am I doing wrong?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    /* wrapper style for IE 5 Mac */
     #container {
    	position:absolute;
    	width:824px;
    	height:100%;
    	visibility:visible;
    	background:#fff;
    }
    	
    /* following rules are invisible to IE 5 \*/
    #container {
    	text-align:center;
    	margin-top:0px;
    	margin-left:-412px;
    	position:absolute;
    	top:0;
    	left:50%;
    	width:824px;
    	min-height:100%;
    	height:auto;
    	visibility:visible;
    	background:#fff;
    }
    html, body {
    	background:#565656;
    	margin:0;
    	padding:0;
    	height:100%;
    }
    /* end IE 5 Mac hack */
    
    html, body {
    	background:#565656;
    	margin:0;
    	padding:0;
    }
    * html #container {
    	height:100%;
    }
    
    #logo {
    	position:absolute;
    	left:12px;
    	top:0px;
    	width:332px;
    	height:60px;
    	background:#000;
    }
    #banner_top {
    	position:absolute;
    	left:344px;
    	top:0px;
    	width:468px;
    	height:60px;
    	backgroundr:#000;
    }
    #border_l {
    	position:absolute;
    	left:0px;
    	top:0px;
    	width:12px;
    	height:100%;
    	background:#565656 url(images/shad_l.gif) repeat-y left top;
    }
    #border_r {
    	position:absolute;
    	left:812px;
    	top:0px;
    	width:12px;
    	height:100%;
    	background:#565656 url(images/shad_r.gif) repeat-y left top;
    }
    #content_left {
    	position:absolute;
    	left:12px;
    	top:110px;
    	width:178px;
    	height:auto;
    }
    #content_center {
    	position:absolute;
    	left:200px;
    	top:110px;
    	width:422px;
    	height:auto;
    }
    #content_right {
    	position:absolute;
    	left:632px;
    	top:110px;
    	width:178px;
    	height:auto;
    }
    #vert_spacer_l {
    	position:absolute;
    	left:190px;
    	top:110px;
    	width:9px;
    	height:auto;
    	background:url(images/vert_spacer.gif) repeat-y left top;
    }
    #vert_spacer_r {
    	position:absolute;
    	left:623px;
    	top:110px;
    	width:9px;
    	height:auto;
    	background:url(images/vert_spacer.gif) repeat-y left top;
    }
    #nav {
    	position:absolute;
    	left:12px;
    	top:60px;
    	width:800px;
    	height:30px;
    	z-index:100;
    	background:#000;
    }
    body,td,th {
    	font-family:"Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;
    	font-size:11px;
    	color:#333;
    }
    -->
    </style>
    
    </head>
    
    <body>
    <div id="container">
    	<div id="border_l"></div>
    	<div id="border_r"></div>
    	<div id="logo"><img src="images/bbr_logo.gif" alt="bbr logo" width="332" height="60" /></div>
    	<div id="banner_top"><img src="images/banners/9b.gif" alt="nonpoint" width="468" height="60" /></div>
    	<div id="nav"></div>
    	<div id="content_left">left</div>
    	<div id="content_center"><?php include('lorem.inc'); ?></div>
    	<div id="content_right">right</div>
    	<div id="vert_spacer_l"></div>
    	<div id="vert_spacer_r"></div>
    </div>
    </body>
    </html>

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Hi,

    What you're doing wrong is mis-using/understanding absolute positioning. Everything inside of your container is absolutely positioned, thus taken out of the static flow and can't affect the wrapper (which you've set to 100% min-height), meaning anything over the view-port's height will overflow the container, rather than pushing it past it's set height.

    Use floats and margins to position your inner content instead. Absolute positioning is not a reliable way to lay out content unless you know exactly what you're doing, and even then, it's not necessary all that often.

  3. #3
    SitePoint Wizard tgavin's Avatar
    Join Date
    Feb 2003
    Location
    FL
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the tip, works like it should now


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
  •