?
Solved

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

Posted on 2010-01-09
7
Medium Priority
?
460 Views
Last Modified: 2012-08-14
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
Comment
Question by:andy_ee
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
7 Comments
 
LVL 7

Accepted Solution

by:
techsathish earned 2000 total points
ID: 26276151
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
 
LVL 1

Expert Comment

by:npcw
ID: 26276642
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
 
LVL 7

Expert Comment

by:techsathish
ID: 26323077
Hi andy_ee,

Is this working correctly...
0
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
LVL 1

Expert Comment

by:npcw
ID: 26323096
yes i have tested it myself and it work't for me
 
0
 
LVL 7

Expert Comment

by:techsathish
ID: 26323141
Yeah nice to hear this...

Cheers...
0
 
LVL 7

Expert Comment

by:techsathish
ID: 26323277
Hi andy_ee,

Which u tried. award points for correct answer...
0
 

Author Closing Comment

by:andy_ee
ID: 31675052
Sorry for the delay ... lost my password.
0

Featured Post

Tutorial: Introduction to Managing a Linux Server

In this tutorial on systemd, we will explore:
-OS/Distro Adoption
-chkconfig and Other Legacy Commands
-Summary and Key Commands

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question