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

Container <div> resize to embedded <div> elements

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
nickmarshall
Asked:
nickmarshall
  • 4
  • 4
2 Solutions
 
mostartCommented:
just don't give it any height or height: 100%
0
 
nickmarshallAuthor Commented:
No, that doesn't work.  I can't see the container anymore (It's simply a white background).
0
 
mostartCommented:
could you post your code here ? Its easier to help you that way
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
nickmarshallAuthor Commented:
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
 
mostartCommented:
ok so what container should be set to what size exactly ?
Are you talking about the Header ?
0
 
nickmarshallAuthor Commented:
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
 
nickmarshallAuthor Commented:
overflow: hidden; seems to have done it...

Im not sure that this is correct however?
0
 
mostartCommented:
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
 
David S.Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

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