SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS 100% heights not working :(

    Hi, Sorry I'm asking for help in my first post.

    I've designed a page layout using photoshop like I usually do and cut the image up to put the page into css + html and am wanting a background image in the bottom left of the content container and also background image on the left for my navigation both to be set to 100% in height.

    Unfortunately I can't get the height to work on the second container no matter what I try so in the end I have to container set to 100% but the following container's height is being determined by the content not the height i specify.

    The page I'm working on is Link.

    Also I've uploaded the original jpg file so people can see what I'm intending to do with the page layout LINK.

    If anyone can spot what I'm doing wrong or can suggest on how I can change the css+html to fit my designer please can you let me know.

    Thankyou
    Andrew

  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)
    Are you trying to make the #content div 100% height? It is using the height of its parent (#container) to calculate 100%, so because that isn't specified (apart from in IE) it won't work.

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

    You can't have multiple nested elements of 100% height unless the parent has a fixed height in pixels. The height collpases to auto (see faq on 100% height).

    You can place your image in respect of the 100% height container but you will need to place it there absolutely and use some html to achieve this.

    Something like this:

    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>
     <link href="style.css" rel="stylesheet" type="text/css" />
     <style type="text/css">
     /* Colours
     
     navi green - #749354
     border green - #336304
     navi hover - #d0dfc0
     
      */
     
     /* ------------------ html overrides ---------------- */
     
     html,body {
     		height:100%;
     		min-height:100%;
     }
     body {
     	background-image: url(images/bg.jpg);
     	margin: 0px;
     	padding: 0px;
     	font-family: "Trebuchet MS";
     	font-size: 1em;
     }
     h1.header {
     	padding: 152px 0 0 0;
     	overflow: hidden;
     	background-image: url(images/header.jpg);
     	background-repeat: no-repeat;
     	height: 0px !important;
     	height /**/:152px;
     	margin: 0;
     	border-bottom: 3px solid #336304;
     	width: 770px;
     }
     
     /* ---------------- ID Tags ---------- */
     
     #container {
     	width: 770px;
     	min-height: 100%;
     	border-right: 3px solid #336304;
     	border-left: 3px solid #336304;
     	text-align: left;
     	margin: 0px auto;
     	background-image:url(images/navi_bg.jpg);
     	background-position: top left;
     	background-repeat: repeat-y;
     	background-color: #fff;
     position:relative;
     }
     * html #container {
     	height: 100%;
     }
     
     #content {
     	width: 610px;
     	min-height: 100%;
     	text-align: left;
     	margin: 0px auto;
     	padding-left: 160px;
     	position: relative;
     	z-index:99;
     }
     * html #content {
     	height: 100%;
     	margin: 0;
     }
     
     .base{
     	background-image: url(images/leaf_bg.jpg);
     	background-position: bottom right;
     	background-repeat: no-repeat;
     	position:absolute;
     	bottom:0;right:0;
     	z-index:1;
     	width:545px;
     	height:274px;
     }
     #navigation {
     	width: 150px;
     	padding: 8px 0 0 0;
     	font-size: 0.8em;
     	position: absolute;
     	top: -20px;
     	left: 0;
     }
     * html #navigation {
     	top: 0px;
     }
     
     /* --------------- class tags ------------------ */
     
     .clear {
     	clear: both;
         height:1px;
     	font-size:0;
     }
     
     </style>
     </head>
     <body>
     <div id="container">
     	<h1 class="header">header header header</h1>
     	<div id="content">
     		<div id="navigation">
     			<p>blah</p>
     			<p>blah</p>
     			<p>blah</p>
     			<p>blah</p>
     		</div>
     		<p>blah</p>
     		<p>blah</p>
     		<p>blah</p>
     		<p>blah</p>
     		<p>blah</p>
     		<p>blah</p>
     		<p>blah</p>
     		<p>blah</p>
     	</div>
     	<div class="clear"></div>
         <div class="base"></div>
     </div>
     </body>
     </html>
    You need height in the clear div in order to clear in older mozilla and use a div instead of a span or you could have problems clearing.

    You would also be better off floating your left column instead of absolute positioning in case it is ever longer than the right content or longer than its container.

  4. #4
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thankyou Paul.

    That sorted the problem out for me.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by all4nerds
    thank P OB your a real BBB
    Hi Ben is that dutch for something nasty

    The poster didn't notice your example was much the same idea as mine

  6. #6
    SitePoint Guru
    Join Date
    Jun 2006
    Posts
    638
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you take out the "<!DOCTYPE" line, "height" will work.

    Just that it will alwais be the height of the parent, and you need to give all the tree heights if you want it the same on all browsers.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    If you take out the "<!DOCTYPE" line, "height" will work.
    Nooo don't do that That's just asking for trouble.

    100% height will work in nested elements (even with a doctype) but what is required is min-height:100% which won't inherit from a parent with a percentage height container.

    If you set 100% height then the element can never exapand and can never accomodate any extra content so you need min-height:100%.

    Of course ie6 and under treat height as a minimum and will expand when required anyway .You can trick mozilla with display:table and that will allow heights to expand but it won't work in ie7.

    The answers given in the above posts solved the problem anyway


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
  •