CSS DIV Height 100%

gamex · 12-15-2005, 04:39 PM

EDIT: SOLVED

Hey everyone,

I know you probably get this a lot, and in fact, I can usually help most people when they have this problem, but now that I am trying this on my own, I cannot figure it out. I have searched all over and the suggestions I saw didnt work, maybe its the way I have my divs set up. I have a lot of divs nested, but that is the only way I can get it set the way I want.

Here is my code, Its a little sloppy only because I have been trying to fix 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>Template</title>
<style type="text/css">
#container {
	width: 668px;
	border: 18px solid #5A5A5A;
	background-color: #E8E8E8;
}

body {
	height: 100%;
}

#main{
	height: 100%;
}

#mainleft {
	float: left;
	width: 510px;
	padding-left: 8px;
	padding-top: 5px;
	padding-bottom: 10px;
	background-color: #E8E8E8;
	background-image: url('images/left_border.jpg');
	background-position: left;
	background-repeat: repeat-y;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #333333;
	font-size: 12px;
	height: 100%;
}

#mainright {
	float: right;
	width: 150px;
	padding-top: 5px;
	padding-bottom: 10px;
	background-color: #E8E8E8;
	background-image: url('images/right_border.jpg');
	background-position: right;
	background-repeat: repeat-y;
	height: 100%;
}
#subheaderright img {
	vertical-align: top;
}

#subheaderright {
	width: 326px;
	float: right;
	background-color: #E8E8E8;
	background-image: url('images/right_border.jpg');
	background-position: right;
	background-repeat: repeat-y;
}

#subheaderleft img {
	vertical-align: top;
}

#subheaderleft {
	width: 342px;
	float: left;
	background-color: #E8E8E8;
	background-image: url('images/left_border.jpg');
	background-position: left;
	background-repeat: repeat-y;
}

#banner {
	background-color: #B7DAE0;
	height: 60px;
	width: 468px;
	vertical-align: middle;
}

img {
	border: 0;
}

#footer {
	width: 668px;
	background-color: #C4C4C4;
	margin: 0;
	padding: 0;
	text-align: center;
}

p {
	text-indent: 7px;
}
</style>

<script language="javascript" type="text/javascript">
<!--
image1 = new Image();
image1.src = "home_omo.jpg";

image2 = new Image();
image2.src = "members_omo.jpg";

image3 = new Image();
image3.src = "join_omo.jpg";

image4 = new Image();
image4.src = "demo_omo.jpg";

image5 = new Image();
image5.src = "contact_omo.jpg";

image6 = new Image();
image6.src = "links_omo.jpg";
-->
</script>
</head>

<body>
<div id="container">
	<div><img src="images/header_c.jpg" /><img src="images/header_d.jpg" /><img src="images/header_e.jpg" /></div>
	<div><img src="images/spacer_a.jpg" /><a href="index.php" onmouseover="image1.src='images/home_omo.jpg'" onmouseout="image1.src='images/home.jpg'"><img src="images/home.jpg" name="image1" /></a><img src="images/spacer_b.jpg" /><a href="members.php" onmouseover="image2.src='images/members_omo.jpg'" onmouseout="image2.src='images/members.jpg'"><img src="images/members.jpg" name="image2" /></a><img src="images/spacer_c.jpg" /><a href="join.php" onmouseover="image3.src='images/join_omo.jpg'" onmouseout="image3.src='images/join.jpg'"><img src="images/join.jpg" name="image3" /></a><img src="images/subheader_a.jpg" /><img src="images/subheader_b.jpg" /><img src="images/subheader_c.jpg" /><a href="demo.php" onmouseover="image4.src='images/demo_omo.jpg'" onmouseout="image4.src='images/demo.jpg'"><img src="images/demo.jpg" name="image4" /></a><img src="images/spacer_d.jpg" /><a href="contact.php" onmouseover="image5.src='images/contact_omo.jpg'" onmouseout="image5.src='images/contact.jpg'"><img src="images/contact.jpg" name="image5" /></a><img src="images/spacer_e.jpg" /><a href="links.php" onmouseover="image6.src='images/links_omo.jpg'" onmouseout="image6.src='images/links.jpg'"><img src="images/links.jpg" name="image6" /></a><img src="images/spacer_f.jpg" /></div>
	<div id="subheaderleft"><img src="images/subheader_d.jpg" /><img src="images/subheader_e.jpg" /><img src="images/subheader_f.jpg" /></div>
	<div id="subheaderright"><img src="images/subheader_g.jpg" /><img src="images/subheader_h.jpg" /><img src="images/subheader_i.jpg" /></div>
	<div id="main">
		<div id="mainleft"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut enim justo, facilisis vitae, fermentum in, tristique vel, lacus. Nullam varius elementum quam. Nulla facilisi. Nam commodo interdum dolor. Etiam ultrices nisi vel purus. Sed est arcu, malesuada non, molestie quis, venenatis et, justo. Curabitur tincidunt eros eget velit. In orci arcu, dapibus at, tempus non, dictum ac, urna. Proin pellentesque ligula varius ipsum. Sed a neque.</p></div>
		<div id="mainright">test2</div>
	</div>
	<div id="footer"><img src="images/footer.jpg"/></div>
</div>
</body>
</html>

Edit: The problem I am having is with the mainleft and mainright divs. Both of those are nested in the main div.

Thanks,

BillyConnite · 12-15-2005, 05:04 PM

Thats very weird... I had a crack at it... I could get the border to behave nicely, but the table did not take up 100% of the page... Were you looking for the table to take up a full pages height, or just as big as the text is...?

gamex · 12-15-2005, 05:13 PM

I attached a screenshot of the page, if you would prefer that I upload it, let me know.

The blue box represents the main div, while the two green boxes represent the mainright and mainleft div. If you look at the Left one, the border stops, because the div doesnt extend to the bottom of the page. I would like that to extend all the way to the bottom. The same thing happens if the right div extends past the left one, but I assume once a solution is figured out for this one, I can use that for the left side as well.

gamex · 12-15-2005, 08:21 PM

Alright, I got it. I ended up creating one large background for the main div, putting some margins in the smaller nested divs, and then it worked.

BillyConnite · 12-15-2005, 08:55 PM

Quote:

Originally Posted by gamex

Alright, I got it. I ended up creating one large background for the main div, putting some margins in the smaller nested divs, and then it worked.

Good to hear you got it working...

What i did was created a table around all your divds with 100% height and a 0 border, worked ok if youd rather trying that.

Best of luck.

gamex · 12-15-2005, 09:01 PM

Thanks for the help.

Rep added.

BillyConnite · 12-16-2005, 03:41 AM

Quote:

Originally Posted by gamex

Thanks for the help.

Rep added.

No problem and thankyou,

even though you did solve the problem yourself

lol.
Good luck.

12-15-2005, 08:21 PM	#4 (permalink)
gamex NamePros Regular Join Date: Feb 2004 Location: Student @ UConn Posts: 408 73.95 NP$ (Donate)	Alright, I got it. I ended up creating one large background for the main div, putting some margins in the smaller nested divs, and then it worked. __________________ Joe CarrotCash.com

12-15-2005, 09:01 PM	#6 (permalink)
gamex NamePros Regular Join Date: Feb 2004 Location: Student @ UConn Posts: 408 73.95 NP$ (Donate)	Thanks for the help. Rep added. __________________ Joe CarrotCash.com

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Various CSS problems	Daniel Exe	Programming	1	11-22-2005 10:46 AM
div - stretch the nav to fit height of content	TeviH	Programming	3	08-31-2005 08:15 PM
CSS relative height. pulling my hair out here!	mrmiyagi	Web Design Discussion	6	05-24-2005 06:05 AM
div positioning + css + IE problem?	countcobolt	Programming	0	12-22-2004 06:55 AM
div height problem	tot	Programming	2	05-12-2004 06:50 AM

12-15-2005, 05:04 PM	#2 (permalink)
BillyConnite Join Date: Jul 2005 Location: Coffs H, Australia Posts: 3,107 47.00 NP$ (Donate)	Thats very weird... I had a crack at it... I could get the border to behave nicely, but the table did not take up 100% of the page... Were you looking for the table to take up a full pages height, or just as big as the text is...?

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)