Jump to content


100% DIV Height with CSS

Started by signature16, Oct 09 2006 07:06 PM

1 reply to this topic

#1 signature16

    Young Padawan

  • Members
  • Pip
  • 180 posts
  • Gender:Male
  • Location:San Diego

Posted 09 October 2006 - 07:06 PM

I am trying to make a DIV with 100% height following the post from a day ago or so.

so far I have this:

html, body {
height: 100%;
}

#wrap		{ margin:auto; width:800px; overflow:hidden;}
#header		{background-image:url(images/header.jpg); height:100px; border-bottom:5px #95a87a solid; overflow:hidden;}
#content	{width:800px; text-align:left; margin:auto; padding-top:25px; float:right; height:auto;}
#nav		{ width:150px; text-align:left; float:left; display:block; line-height:1.0em; padding-left:10px;
				background-image:url(images/patterntile.gif); background-repeat:repeat; height:auto;}

<!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>Sagefield Homes in Temecula</title>
<link rel="stylesheet" type="text/css" href="sagefield.css">
</head>

<body>
<div id="wrap">
<div id="header"></div>
<div id="nav">
</div>
</div>
</body>
</html>


Why isn't doesnt this let the nav div expand to 100%?

#2 signature16

    Young Padawan

  • Members
  • Pip
  • 180 posts
  • Gender:Male
  • Location:San Diego

Posted 12 October 2006 - 01:26 PM

After like a week of research I finally managed to connect one and one to find the answer.

Basically instead of setting a background on the navigation part, i set a background on the #wrap. This is the code I used:
html,body  {height:100%;}

#wrap		{ margin:auto; width:800px; overflow:hidden; background-image:url(images/patterntile.gif); 
				background-position:left; background-repeat:repeat-y;}

Back to Programming and General Web Design · Next Unread Topic →


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Pixel2Life Forum
  2. → Help Section
  3. → Programming and General Web Design