• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 461
  • Last Modified:

DIV not expanding to accomodate contents and would like outer div height to be 100%

I have two issues that I would like to solve.  

1. The DIV called "outer" is not expanding to accommodate it's contents.
2. I would like, if possible, to have the DIV called "outer" to have a height of 100%  

Thanks.
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
	body {background:#000;margin:0;padding:0;height:100%;width:100%;font:0.8em/1.25em tahoma;color:#fff;}
	
	ul.menu {padding:0;margin:0;list-style-type:none;}
	ul.menu li {}
	ul.menu li a {display:block;padding:2px;padding-left:5px;text-decoration:none;color:#fff;font-weight:bold;margin-bottom:1px;}
	ul.menu li a.last {margin-bottom:0px;}
</style>
</head>
<body>

<div id="outer" style="margin:20px;padding:10px;border:solid 1px #683812;background:#3d0101;height:100%;display:block;">
	<div id="innerLeft" style="border:solid 1px #99653c;background:#5a0100;float:left;width:200px;padding:5px;height:100%;">
		<ul class="menu">
			<li><a href="#">Menu Item</a></li>
			<li><a href="#">Contact</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#" class="last">Home</a></li>
		</ul>
	</div>

	<div id="innerRight" style="border:solid 1px #99653c;background:#5a0100;margin-left:220px;padding:5px;height:100%;">
	
	</div>
</div>

</body>
</html>

Open in new window

image-1.png
image-2.png
0
andy_ee
Asked:
andy_ee
  • 4
  • 2
1 Solution
 
techsathishCommented:
Hi andy_ee,

Try 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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
        body {
			background:#000;
			margin:auto;
			font:0.8em/1.25em tahoma;
			color:#fff;
			}
		#container {
			margin:auto;
			width:1000px;
			background-color:#cc0000;
		}
        ul.menu {padding:0;margin:0;list-style-type:none;}
        ul.menu li {}
        ul.menu li a {display:block;padding:2px;padding-left:5px;text-decoration:none;color:#fff;font-weight:bold;margin-bottom:1px;}
        ul.menu li a.last {margin-bottom:0px;}
		
		#outer {
			float:left;
			border:solid 1px #683812;
			background:#3d0101;
			width:1000px;
			padding:10px;
		}
		#innerLeft
		{
			border:solid 1px #99653c;
			background:#5a0100;
			float:left;
			width:188px;
			padding:5px;
		}
		#innerRight {
			float:left;
			width:768px;
			border:solid 1px #99653c;
			background:#5a0100;
			padding:5px;
			margin:5px;
		}
</style>
</head>
<body>
<div id="container">
<div id="outer">
        <div id="innerLeft">
                <ul class="menu">
                        <li><a href="#">Menu Item</a></li>
                        <li><a href="#">Contact</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#" class="last">Home</a></li>
                </ul>
        </div>

        <div id="innerRight">
        
        </div>
</div>
</div>

</body>
</html>

Open in new window

0
 
npcwCommented:
try this code i have sucesful tested them in firefox and safari
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled 1</title>

<style type="text/css">
body {background:#000;margin:0;padding:0;height:100%;width:100%;font:0.8em/1.25em tahoma;color:#fff;}
ul.menu {padding:0;margin:0;list-style-type:none;}
ul.menu li {}
ul.menu li a {display:block;padding:2px;padding-left:5px;text-decoration:none;color:#fff;font-weight:bold;margin-bottom:1px;}
ul.menu li a.last {margin-bottom:0px;}
</style>
</head><body onload="getWindowheight() ">
<div id="outer" style="border: 1px solid rgb(104, 56, 18); margin: 20px; padding: 10px; background: rgb(61, 1, 1) none repeat scroll 0% 50%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; display: block;">
<table style="text-align: left;" width="100%" id="maintab" border="0" cellpadding="5" cellspacing="0" height="innerRight.height+10px">
<tbody>
<tr>
<td style="padding: 2px; width: 220px; vertical-align: top; white-space: nowrap;">
<div style="border: 1px solid rgb(153, 101, 60); padding: 5px; background: rgb(90, 1, 0) none repeat scroll 0% 50%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; width: 200px; height: 100%;" id="innerLeft">
<ul class="menu">
<li><a href="#">Menu Item</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
<li><a href="#" class="last">Home</a></li>
</ul>
</div>
<br>
</td>
<td style="padding: 2px; vertical-align: top; white-space: nowrap;">
<div style="border: 1px solid rgb(153, 101, 60); padding-top: 10px; padding-bottom: 10px; background-color: rgb(90, 1, 0); background-image: none; background-repeat: repeat; background-attachment: scroll; height: 100%;" id="innerRight" name="innerRight"><br>
</div>
<br>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript"> function getWindowheight() {{maintab.hight=innerRight.height+10px} } </script>
</body></html>

Open in new window

0
 
techsathishCommented:
Hi andy_ee,

Is this working correctly...
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
npcwCommented:
yes i have tested it myself and it work't for me
 
0
 
techsathishCommented:
Yeah nice to hear this...

Cheers...
0
 
techsathishCommented:
Hi andy_ee,

Which u tried. award points for correct answer...
0
 
andy_eeAuthor Commented:
Sorry for the delay ... lost my password.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now