SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Sep 2002
    Posts
    225
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can't get 100% height on page to work!

    I'm trying to get the yellow part of the layout to be at 100% height on www.boser.org web site. I can't seem for the life of me to get this to work. I've read the 100% hack and tried to implement it and still can't get this to work. Below is the CSS and HTML.

    Thanks for any help!

    Code:
    <body>
     
     	<div id="wrapper">
     		<div id="content">
     			<div id="masthead">
     				<div id="introtext">
         		    	<?php mosLoadModules( 'top', 1 ); ?>
     				</div>
     			</div>
     			 
     			<div id="pagecontent">
     				<div id="menutext">
     				<div id="menu-main">
         		    	<?php mosLoadModules ( 'left' ); ?>
     				</div>
     		 </div>			
     			
     				<div id="textcontainer">
     					<?php mosMainBody(); ?>
     				</div>
     			</div>
     			<div style="clear:both;">
     			<div id="footer">
     				copyright 2005
     			</div>
     		</div>
     	</div>
     </body>
    Code:
     /* commented backslash hack \*/ 
     html, body{height:100%;} 
     /* end hack */
     html,body {margin:0;padding:0}
      /*
     #wrapper{min-height:100%}/* for good browsers*/
     /* html #wrapper{height:100%}/* for ie*/
     
     /*******************************
     	
     	User styles
     	
     *******************************/
     
     body {
     	font-family: Arial, Helvetica, sans-serif;
     	font-size: 12px;
     	text-align: center;
     	background-image: url(../images/bg.gif);
     	background-repeat: repeat;
     	padding: 0;
     	margin: 0;
     }
     
     #wrapper {
     	width: 770px;
     	background-image: url(../images/bg-border.gif);
     	background-repeat: repeat-y;
     	text-align: center;
     	margin-left: auto;
     	margin-right: auto;
     	padding: 0;
     	min-height: 100%;
     	/*border: 1px solid #ff0000;*/
     }
     * html #wrapper { height: 100%; }
     
     #content {
     	text-align: center;
     	width: 676px;
     	margin: auto;
     	padding: 0;
     }
     
     #masthead {
     	width: 676px;
     	height: 156px;
     	background-image: url(../images/mast-head.jpg);
     	background-repeat: no-repeat;
     	margin: auto;
     	padding: 0;
     }
     
     #introtext {
     	position: relative;
     	text-align: left;
     	visibility: hidden;
     	color: #fff;
     	width: 300px;
     	margin: 0;
     	padding: 13px 0 13px 0;
     	border-bottom: 1px dotted #fff;
     	border-top: 1px dotted #fff;
     	top: 15px;
     	left: 100px;
     }
     
     #pagecontent {
     	text-align: left;
     	/*background-color: #eee;*/
     	width: 666px;
     	/*border: 1px solid #999;*/
     	margin: auto;
     	padding: 0;
     	min-height:100%;
     	border: 1px solid red;
     }
     * html #pagecontent { height:100%; }
     
     #menutext {
     	width: 140px;
     	float: left;
     	margin: 0;
     	padding: 5px 0 5px 1px;
     }

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure I can see what you're trying to do, but do you know your footer is 400px high?

  3. #3
    SitePoint Addict
    Join Date
    Sep 2002
    Posts
    225
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't even notice that! Thanks for the heads up!

    I've changed that but now, if you look at the page, I need to move the copyright information to be flush at the bottom of the browser. How would I do this?

    Thanks!

  4. #4
    SitePoint Addict
    Join Date
    Sep 2002
    Posts
    225
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *bump*

  5. #5
    SitePoint Addict
    Join Date
    Sep 2002
    Posts
    225
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *bump*

  6. #6
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    Netherlands
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How's your doctype?

  7. #7
    SitePoint Addict
    Join Date
    Sep 2002
    Posts
    225
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here's the doctype of my page.

    Code:
     <?xml version="1.0" encoding="iso-8859-1"?><!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>www.boser.org - Home</title>
    <meta name="description" content="Mambo - the dynamic portal engine and content management system" />
    <meta name="keywords" content="mambo, Mambo" />
    <meta name="Generator" content="Mambo - Copyright 2000 - 2005 Miro International Pty Ltd.  All rights reserved." />
    <meta name="robots" content="index, follow" />
    	<link rel="shortcut icon" href="http://www.boser.org/images/favicon.ico" />
    	<link rel="stylesheet" type="text/css" href="http://www.boser.org/templates/JavaBean/css/template_css.css" />
    </head>
    <body>

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You need to place the footer after the 100% high container and then drag it back into position with a negative margin. remove the 100% height from pagecontent as you cannot have 100% starting halfway down the page.

    You also need to clear the floats.

    Code:
    #pagecontent {
     text-align: left;
     /*background-color: #eee;*/
     width: 666px;
     /*border: 1px solid #999;*/
     margin: auto;
     padding: 0 0 45px 0;/* preserve footer*/
     border: 1px solid red;
    /* height removed*/
    }
    
    #footer {
     text-align: right;
     font-size: 9px;
     background-color: #ccc;
     color: #666;
     width: 666px;
     border-top: 1px solid #999;
     clear: both;
     margin: auto;
     padding: 0 ;
     height: 40px;
    width:665px;
    margin-top:-40px;
    position:relative;
    }
    
    .clearer{
    height:1px;
    overflow:hidden;
    margin-top:-1px;
    clear:both;
    }
    

    Code:
    		</table>
    	  </div>
        <div class="clearer"></div>
    	</div>
    	<div class="clearer"></div>
      </div>
    </div>
    <div id="footer"> copyright 2005 </div>
    </body>
    </html>

    You are using the xml declaration which puts ie6 into quirks mode and works with the broken box model. You will need to make sure you account for padding and borders correctly in quirks mode (see faq on broken box model).

    Also read the faq on 100% height and the faq on putting a footer at the bottom of the page.

    Hope that helps.)


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
  •