Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Container <div> resize to embedded <div> elements

Posted on 2009-05-08
9
Medium Priority
?
1,061 Views
Last Modified: 2012-05-06
Experts,

I'd like to resize the height of a DIV container to the elements contained inside the DIV tag.  I'm sure this is possible, please help
0
Comment
Question by:nickmarshall
[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
  • 4
9 Comments
 
LVL 8

Expert Comment

by:mostart
ID: 24336630
just don't give it any height or height: 100%
0
 
LVL 1

Author Comment

by:nickmarshall
ID: 24336791
No, that doesn't work.  I can't see the container anymore (It's simply a white background).
0
 
LVL 8

Expert Comment

by:mostart
ID: 24336842
could you post your code here ? Its easier to help you that way
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 1

Author Comment

by:nickmarshall
ID: 24336908
OK, here's the html and the css

<!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=utf-8" />
<title>Control Panel</title>
<link href="../controlstyle.css" rel="stylesheet" type="text/css" />
<link href="../table.css" rel="stylesheet" type="text/css" />
</head>
 
<body class="body">
	<!-- Main container -->
	<div class="Container">
	
		<!-- Header -->
        <div class="Top">
			<div class="TopLogo"><p style="margin:50px 0px 0px 20px; color:#ffffff; font-size:34px;">ActiveSOS control panel</p></div>
			<div class="TopAdvert"><img src="" width="450px" height="50px" style="margin:15px 20px 15px 0px; background:#ffffff;"></div>
		</div>
       
		<!-- Navigation bar -->
		<div class="Topbar">
			<div style="margin:0px; background:#ffffff; width:100px; height:30px; float:left; text-align:center;"><p style="margin-top:5px;">Home</p></div>
			<div style="margin:0px; background:#339933; border-left:1px solid #ffffff; width:130px; height:30px; float:left; text-align:center;"><p style="margin-top:5px; color:#ffffff;">Network management</p></div>
			<div style="margin:0px; background:#339933; border-left:1px solid #ffffff; width:150px; height:30px; float:left; text-align:center;"><p style="margin-top:5px; color:#ffffff;">SMS & Email alerting</p></div>
			<div style="margin:0px; background:#339933; border-left:1px solid #ffffff; width:130px; height:30px; float:left; text-align:center;"><p style="margin-top:5px; color:#ffffff;">Asset management</p></div>
			<div style="margin:0px; background:#339933; border-left:1px solid #ffffff; width:100px; height:30px; float:left; text-align:center;"><p style="margin-top:5px; color:#ffffff;">Downloads</p></div>
			<div style="margin:0px; background:#339933; border-left:1px solid #ffffff; width:100px; height:30px; float:left; text-align:center;"><p style="margin-top:5px; color:#ffffff;">Support</p></div>
			<div style="float:right; margin-right:20px;"><p style="margin-top:5px; color:#ffffff; font-style: italic"><?php echo date('l jS \of F Y h:i:s A'); ?></p></div>
		</div>
        
		<!-- Middle container 100% width -->
        <div class="MiddleContainer">
			<div class="MiddleInset">
				
				<!-- Left section of content -->
				<div class="Left"><?php include($page); ?></div>
				
				<!-- Right section of content -->
				<div class="Right">
				
				</div>
				
			</div>
        </div>
		
		<!-- Footer -->
		<div class="footer"></div>
		
	<!-- End main container -->
	</div>
</body>
</html>
 
 
 
///////////////////////////// CSS
 
/* Control Panel stylesheet */
 
body { 
	text-align:center;
	margin:0px 0px 0px 0px; 
	font-family:Arial, Helvetica, sans-serif; 
	font-size:11px; color:#666666; 
	line-height:17px; 
	background:#efefef;
}
	
/*********************************************************************/
 
 
/******************** MAIN CONTAINER  *******************/
 
div.Container {
	margin:0px auto;
	width:70%;
	text-align:center;
}
 
 
/******************** TOP SECTION  *******************/
 
div.Top {
	width:100%;
	margin:0px;
	background-color:#66cc33;
	height:120px;
	text-align:left;
}
 
div.Topbar {
	width:100%;
	margin:0px;
	background:#339933;
	height:30px;
	text-align:left;
}
 
div.TopLogo {
	width:50%;
	height:80px;
	float:left;
	text-align:left;
}
div.TopAdvert{
	width:50%;
	height:80px;
	float:left;
	text-align:right;
}
 
 
 
/******************** CONTENT  SECTION  *******************/
 
div.MiddleContainer {
	width:100%;
	margin:0px auto;
	text-align:left;
	background:#ffffff;
	height:500px;
}
div.MiddleInset {
	margin:20px;
	background:#ffffff;
}
 
div.Left {
	width:80%;
	height:auto;
	margin:0px;
	float:left;
}
 
div.Right {
	margin:0px;
	width:20%;
	height:auto;
	float:left;
}
 
 
/******************** TABLES  *******************/
 
table.TableOne
{
	table-layout: automatic
}
 
 
 
/******************** FOOTER  *******************/
 
div.footer {
	width:100%;
	height:20px;
	margin:0px;
	text-align:left;
	border-top:1px solid #cccccc;
}

Open in new window

0
 
LVL 8

Expert Comment

by:mostart
ID: 24336965
ok so what container should be set to what size exactly ?
Are you talking about the Header ?
0
 
LVL 1

Author Comment

by:nickmarshall
ID: 24337030
I'd like the MiddleContainer element to resize automatically....

i.e. If the <div> elements contained inside are 400px, or whatever height, the MiddleContainer will resize, maintaining the whitebackground, as the body background is grey, and this is what's currently being shown.
0
 
LVL 1

Author Comment

by:nickmarshall
ID: 24337231
overflow: hidden; seems to have done it...

Im not sure that this is correct however?
0
 
LVL 8

Accepted Solution

by:
mostart earned 1000 total points
ID: 24337380
no that will not really work as you expect it.
Your problem is the float however. It's quite a tricky thing to have a two column layout with a growing parent container.

I had the same problem once and used a table instead in the end.
This will give you all info about it:
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_24169419.html
0
 
LVL 43

Assisted Solution

by:David S.
David S. earned 1000 total points
ID: 24339552
That's the way floats work -- they'll overflow the bottom of their container if there isn't something to stop them.

Using overflow:auto or overflow:hidden to make an element contain its floated descendants does work, but can result in troublesome side effects sometimes. The PIE/Aslett approach, while requiring more code, is more robust.

More information: http://www.dynamicsitesolutions.com/css/layout-techniques/#clearing_floats
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

722 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