HTML and CSS

Wrapper div adapt to height of nested div?

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Sep 2009

Posts: 5

Reputation: decimo is an unknown quantity at this point

Solved Threads: 0

decimo

Offline

Newbie Poster

Wrapper div adapt to height of nested div?

-1

Sep 16th, 2009

I'm having some problem emulating the behavior of forums running phpBB or IPB.

How do I make a wrapper div of a post maintain a minimum height? Currently, my user info and post content go into two separate divs (floated left and right) but the parent div (the wrapper) only keeps a height of any text within it, i.e. the other two divs just overflow out of it =( I want the wrapper to maintain a minimum height, but if the post content is large, I also want it to adapt to the height of the post content div (or in the case of a window resize where the post text can be 'squeezed' into being really long).

•

Join Date: Aug 2009

Posts: 59

Reputation: Quick_Silver69 is an unknown quantity at this point

Solved Threads: 2

Quick_Silver69 Quick_Silver69 is offline

Offline

Banned

Re: Wrapper div adapt to height of nested div?

Sep 16th, 2009

For 100% or "full" height using CSS, I do the following:

First try setting your html and body rules to height:100% on both
(html,body{
height:100%;}. They are auto by default in many browsers, which means to
collapse. Then make your container div height:auto and min-height:100%
(#container {height:auto;min-height:100%;}). That will allow your
content area to fill 100% of the viewport for standardized css browsers,
but content can extend and fill that without breaking through it and
overflowing. Last issue is now with IE. It does not read min-height, and
needs height:100% to work right, and does not fill height with 'auto'.
So, add a hack for IE like this (* html #container{height:100%;}), to
the code above, and you should have IE and Mozilla agents using correct height thats the full length. I have another hack for Safari which also suffers from this problem, if you need that too.

OR OR OR OR OR

A New Solution

Assuming you know how min-height is ’supposed’ to work, would it be all that bold that it’s safe to say that…well… can’t we just do this? (because that’s what I’ve decided to do after throwing IE5.x out the window)

CSS: min-height with !important

selector {
min-height:500px;
height:auto !important;
height:500px;
}

Assuming IE6 will not fix the correct implementation for the !important declaration and assuming that if IE7 does, they’ll also implement min-height correctly since at the pace they’re going they’re fixing CSS like mad crazy cows. Is that too many assumptions? But wouldn’t you agree?

Last edited by Quick_Silver69; Sep 16th, 2009 at 11:04 pm. Reason: updating

•

Join Date: Sep 2009

Posts: 5

Reputation: decimo is an unknown quantity at this point

Solved Threads: 0

decimo

Offline

Newbie Poster

Re: Wrapper div adapt to height of nested div?

Sep 16th, 2009

Hey, thanks for the quick reply!

If I understand correctly your solution fills up the whole window with a div (#container?) and increases in height if the contents are large? My problem is kind of different I think. I just tried the following bit of code:

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<!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>
	<title>Poasts Test Site</title>
 
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
	<style>
		html,body{
		height:100%;
		}
 
		#container {
		height:auto;
		min-height:200px;
		background-color: #f13;
		border: 1px solid #31e;
		}
	</style>
 
</head>
 
 
<body>
 
<div id="container">
<div id="authorinfo" style="float:left;">
<p>a></p>
<p>a></p>
<p>a></p>
<p>a></p>
<p>a></p>
<p>a></p>
<p>a></p>
<p>a></p>
<p>a></p>
<p>a></p>
</div>
 
<div id="postcontent" style="float:right;">
<p>a></p>
<p>a></p>
<p>a></p>
<p>a></p>
<p>a></p>
<p>a></p>
<p>a></p>
<p>a></p>
<p>a></p>
<p>a></p>
</div>
 
</div>
 
</body>
</html>
<!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>
	<title>Poasts Test Site</title>
	
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	
	<style>
		html,body{
		height:100%;
		}
		
		#container {
		height:auto;
		min-height:200px;
		background-color: #f13;
		border: 1px solid #31e;
		}
	</style>
	
</head>


<body>

<div id="container">
<div id="authorinfo" style="float:left;">
<p>a></p>
<p>a></p>
<p>a></p>
<p>a></p>
<p>a></p>
<p>a></p>
<p>a></p>
<p>a></p>
<p>a></p>
<p>a></p>
</div>

<div id="postcontent" style="float:right;">
<p>a></p>
<p>a></p>
<p>a></p>
<p>a></p>
<p>a></p>
<p>a></p>
<p>a></p>
<p>a></p>
<p>a></p>
<p>a></p>
</div>

</div>

</body>
</html>

The paragraphs shoot right out of the container div =(
The container is a user post (like this) and multiple instances of it will exist in a page. For example, I'm trying to make it's height stick to 200px in case of a small user comment (couple of lines) or increase in height according to the height of a bigger post (many lines). I hope I made sense there

Thanks.

EDIT: @New Solution: I'd agree if I understood what was said fully

I'm still kind of a noob with css..

This seems to work: I just put the following bit in the bottom:

<div id="cleardiv"></div>

with:

#cleardiv {
clear:both;
}

Last edited by decimo; Sep 16th, 2009 at 11:23 pm. Reason: just tried something

•

Join Date: Jun 2008

Posts: 348

Reputation: Troy III will become famous soon enough

Solved Threads: 42

Troy III

Offline

Posting Whiz

Re: Wrapper div adapt to height of nested div?

Sep 17th, 2009

So you would like the contents to be fllowing something like this?
:')\ hmmm...

Attached Thumbnails

•

Join Date: Sep 2009

Posts: 5

Reputation: decimo is an unknown quantity at this point

Solved Threads: 0

decimo

Offline

Newbie Poster

Re: Wrapper div adapt to height of nested div?

Sep 18th, 2009

•

Originally Posted by Troy III

So you would like the contents to be fllowing something like this?
:')\ hmmm...

Well, thanks, yeah

I was kind of losing my head over that one. Didn't know about "clear: both;".

•

Join Date: Jun 2008

Posts: 348

Reputation: Troy III will become famous soon enough

Solved Threads: 42

Troy III

Offline

Posting Whiz

Re: Wrapper div adapt to height of nested div?

Sep 19th, 2009

•

Originally Posted by Troy III

So you would like the contents to be fllowing something like this?
:')\ hmmm...

•

Originally Posted by decimo

Well, thanks, yeah I was kind of losing my head over that one. Didn't know about "clear: both;".

I wasn't using FLOATS there at all - no floats in that code. I hate floats. I like inline-blocks a lot better.

•

Join Date: Jan 2007

Posts: 3,203

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 164

MidiMagic

Offline

Nearly a Senior Poster

Re: Wrapper div adapt to height of nested div?

Sep 26th, 2009

There is no way to fill the viewport exactly that works on all computers, browsers, window sizes, screen resolutions, and screen aspect ratios. Do not attempt to do this. It is not intended to be done, so it is not part of the W3C standard.

Div is not currently defined to work with 100% height unless the height of its container is defined in some measure other than %. 100 percent of the outermost container is the height of the content, not the viewport. There is no standard way to get the height of the viewport.

Daylight-saving time uses more gasoline

•

Join Date: Jun 2008

Posts: 348

Reputation: Troy III will become famous soon enough

Solved Threads: 42

Troy III

Offline

Posting Whiz

Re: Wrapper div adapt to height of nested div?

Sep 26th, 2009

Decimos problem was:

1. (to) make a wrapper div of a post maintain a minimum height

2. my user info and post content go into two separate divs (floated left and right) but the parent div (the wrapper) only keeps (its own height) the other two divs just overflow out of it =(
3. I want the wrapper to maintain a minimum height, but if the post content is large, I also want it to adapt to the height of the post content div (or in the case of a window resize where the post text can be 'squeezed' into being really long).

Meaning he wants to prevent the content beading off of its div container in Netscape based UAs.
Not to fill the window but to keep [1] the minimum height of it in all situations.

•

Join Date: Oct 2009

Posts: 3

Reputation: terri1210 is an unknown quantity at this point

Solved Threads: 0

terri1210

Offline

Newbie Poster

Re: Wrapper div adapt to height of nested div?

Oct 2nd, 2009

I'm having a similar issue. My wrapper div is not adjusting to the height of the longest column. I've tried the "height: auto;min height 100% and it's not working. Help!

Here's my code:

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>monzo</title>
<link rel="stylesheet" type="text/css" href="./monzo.css" media="all" />
<!--[if IE]>
<style type="text/css" media="all">.borderitem {border-style:solid;}</style>
<![endif]-->
</head>
 
<body>
 
	<img src="images/header.jpg" id="header"  alt="Monzo Marketing" />
		<br class="clearfloat" />
 
<div id="wrap">
 
  <div id="leftbar">
<img src="images/people_hdr.gif" id="people_hdr"  alt="" />
				<br class="clearfloat" />
  </div>
 
    <div class="Text" id="textbox">
      <p>Content for  class "Text" Goes Here    </p>
      <p>daklfja;ldk f</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>jlkflakjds;fl      </p>
      <p>jhlkjj;flakd f;lakdj f</p>
      <p>&nbsp;</p>
      <p>dklfja;ldadsdlfkjl</p>
    </div>
 
<link href="single_four.css" rel="stylesheet" type="text/css" />
		<ul id="menu">
			<li id="home"><a href="index.html"><b>Home</b></a></li>
			<li id="people"><a href="people.html"><b>People</b></a></li>
			<li id="services"><a href="services.html"><b>Services</b></a></li>
			<li id="clients"><a href="clients.html"><b>Clients</b></a></li>
			<li id="work"><a href="work.html"><b>Work</b></a></li>
			<li id="contact"><a href="contact.html"><b>Contact&nbsp;Us</b></a></li>
		</ul>
 
  <div id="bkgd">
  </div>     
 
<!--end of wrap-->
</div>
 
</body>
 
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>monzo</title>
<link rel="stylesheet" type="text/css" href="./monzo.css" media="all" />
<!--[if IE]>
<style type="text/css" media="all">.borderitem {border-style:solid;}</style>
<![endif]-->
</head>

<body>

	<img src="images/header.jpg" id="header"  alt="Monzo Marketing" />
		<br class="clearfloat" />
        
<div id="wrap">
        
  <div id="leftbar">
<img src="images/people_hdr.gif" id="people_hdr"  alt="" />
				<br class="clearfloat" />
  </div>
  
    <div class="Text" id="textbox">
      <p>Content for  class "Text" Goes Here    </p>
      <p>daklfja;ldk f</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>jlkflakjds;fl      </p>
      <p>jhlkjj;flakd f;lakdj f</p>
      <p>&nbsp;</p>
      <p>dklfja;ldadsdlfkjl</p>
    </div>

<link href="single_four.css" rel="stylesheet" type="text/css" />
		<ul id="menu">
			<li id="home"><a href="index.html"><b>Home</b></a></li>
			<li id="people"><a href="people.html"><b>People</b></a></li>
			<li id="services"><a href="services.html"><b>Services</b></a></li>
			<li id="clients"><a href="clients.html"><b>Clients</b></a></li>
			<li id="work"><a href="work.html"><b>Work</b></a></li>
			<li id="contact"><a href="contact.html"><b>Contact&nbsp;Us</b></a></li>
		</ul>
       
  <div id="bkgd">
  </div>     

<!--end of wrap-->
</div>

</body>

</html>

And my CSS:

 Help with Code Tags 
 css Syntax (Toggle Plain Text) 
body {
	margin:0px;
	padding:0px;
}
.p {
	padding:0px;
	font-size: 36px;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: inherit;
	text-align: left;
	color: inherit;
	line-height: inherit;
	left: 230px;
	top: 100px;
	display: inline;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	position: absolute;
	width: 586px;
}
p {
	padding-top:0px;
	margin-top:0px;
}
img {
	border:0px;
}
div {
	margin:0px;
	padding:0px;
	font-family:verdana; font-size:12px;
}
.AbsWrap {
	width: 100%;
	position: relative;
}
.rowWrap {
	width: 100%;
}
.clearfloat {
	clear:both;
	height:0px;
}
a:link, a:visited{
	COLOR:inherit;
	text-decoration:inherit;
}
 
#header {
	margin-left:0px;
	margin-top:0px;
	width:900px;
	height:143px;
	margin-bottom:0px;
	float:left;
	display:inline;
 
}
#leftbar {
	width:210px;
	padding-top:0px;
	height:auto;
	margin-left:0px;
	margin-top:0px;
	margin-bottom:0px;
	float:left;
	display:inline;
}
#people_hdr {
	margin-left:11px;
	margin-top:42px;
	width:184px;
	height:54px;
	margin-bottom:0px;
	float:left;
	display:inline;
 
}
.Text{
	width:586px;
	float:none;
	display:inline;
	font-size:11px;
	font-family:Verdana, Geneva, sans-serif;
	font-weight: normal;
	text-align: left;
	color: #333333;
	line-height: 120%;
	padding-top:1px;
	padding-bottom:2px;
	position: absolute;
	left: 231px;
	top: 117px;
	margin: 0px;
	min-height: 100%;
	z-index: 300;
}
#footer {
	width:900px;
	padding-top:0px;
	height:14px;
	margin-left:0px;
	margin-top:4px;
	margin-bottom:0px;
	float:left;
	display:inline;
	clear: both;
}
 
/*thisis nav bar*/
 
#menu {
	padding:0;
	list-style:none;
	height:50px;
	background:url(ulback.gif) repeat-x;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0px;
	position: absolute;
	left: 211px;
	top: 0px;
	z-index: 200;
}
/* ================================================================ 
This copyright notice must be untouched at all times.
 
The original version of this stylesheet and the associated (x)html
is available at [url]http://www.cssmenus.co.uk[/url]
Copyright (c) 2009- Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
#menu li {float:left;}
#menu li a {
	display:block;
	height:50px;
	line-height:25px;
	padding:0 20px 0 0;
	float:left;
	color:#fff;
	text-decoration:none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: lighter;
	font-style: normal;
	background-image: url(images/tab_a.gif);
	background-repeat: no-repeat;
	background-position: right -25px;
}
#menu li a b {
	display:block;
	height:50px;
	float:left;
	padding:0 0 0 20px;
	cursor:pointer;
	background-image: url(images/tab_b.gif);
	background-repeat: no-repeat;
	background-position: left -25px;
}
#menu li a:hover,
#menu li a:active,
#menu li a:focus,
.home #menu li#home a,
.single #menu li#single a,
.dropdown #menu li#dropdown a,
.dropline #menu li#dropline a,
.flyout #menu li#flyout a,
.support #menu li#support a,
.contact #menu li#contact a
{background:url(tab_a.gif) no-repeat right -10px; line-height:50px; color:#fff;}
#menu li a:hover b,
#menu li a:active b,
#menu li a:focus b,
.home #menu li#home a b,
.single #menu li#single a b,
.dropdown #menu li#dropdown a b,
.dropline #menu li#dropline a b,
.flyout #menu li#flyout a b,
.support #menu li#support a b,
.contact #menu li#contact a b
{background:url(tab_b.gif) no-repeat left -10px; line-height:50px;}
 
#bkgd {
	background-color: #FFF;
	background-image: url(images/bkgd_1px.jpg);
	background-repeat: repeat-x;
	width: 690px;
	position: absolute;
	left: 211px;
	top: 0px;
	z-index: 100;
	height: 300px;
}
 
#wrap {
	width:900px;
	background-image: url(images/bkgd_tan_wh900px.gif);
	background-repeat: repeat-y;
	position: absolute;
	top: 143
px;
	overflow: visible;
	height: auto;
	min-height: 100%;
}
body {
	margin:0px;
	padding:0px;
}
.p {
	padding:0px;
	font-size: 36px;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: inherit;
	text-align: left;
	color: inherit;
	line-height: inherit;
	left: 230px;
	top: 100px;
	display: inline;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	position: absolute;
	width: 586px;
}
p {
	padding-top:0px;
	margin-top:0px;
}
img {
	border:0px;
}
div {
	margin:0px;
	padding:0px;
	font-family:verdana; font-size:12px;
}
.AbsWrap {
	width: 100%;
	position: relative;
}
.rowWrap {
	width: 100%;
}
.clearfloat {
	clear:both;
	height:0px;
}
a:link, a:visited{
	COLOR:inherit;
	text-decoration:inherit;
}

#header {
	margin-left:0px;
	margin-top:0px;
	width:900px;
	height:143px;
	margin-bottom:0px;
	float:left;
	display:inline;

}
#leftbar {
	width:210px;
	padding-top:0px;
	height:auto;
	margin-left:0px;
	margin-top:0px;
	margin-bottom:0px;
	float:left;
	display:inline;
}
#people_hdr {
	margin-left:11px;
	margin-top:42px;
	width:184px;
	height:54px;
	margin-bottom:0px;
	float:left;
	display:inline;

}
.Text{
	width:586px;
	float:none;
	display:inline;
	font-size:11px;
	font-family:Verdana, Geneva, sans-serif;
	font-weight: normal;
	text-align: left;
	color: #333333;
	line-height: 120%;
	padding-top:1px;
	padding-bottom:2px;
	position: absolute;
	left: 231px;
	top: 117px;
	margin: 0px;
	min-height: 100%;
	z-index: 300;
}
#footer {
	width:900px;
	padding-top:0px;
	height:14px;
	margin-left:0px;
	margin-top:4px;
	margin-bottom:0px;
	float:left;
	display:inline;
	clear: both;
}

/*thisis nav bar*/

#menu {
	padding:0;
	list-style:none;
	height:50px;
	background:url(ulback.gif) repeat-x;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0px;
	position: absolute;
	left: 211px;
	top: 0px;
	z-index: 200;
}
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at [url]http://www.cssmenus.co.uk[/url]
Copyright (c) 2009- Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
#menu li {float:left;}
#menu li a {
	display:block;
	height:50px;
	line-height:25px;
	padding:0 20px 0 0;
	float:left;
	color:#fff;
	text-decoration:none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: lighter;
	font-style: normal;
	background-image: url(images/tab_a.gif);
	background-repeat: no-repeat;
	background-position: right -25px;
}
#menu li a b {
	display:block;
	height:50px;
	float:left;
	padding:0 0 0 20px;
	cursor:pointer;
	background-image: url(images/tab_b.gif);
	background-repeat: no-repeat;
	background-position: left -25px;
}
#menu li a:hover,
#menu li a:active,
#menu li a:focus,
.home #menu li#home a,
.single #menu li#single a,
.dropdown #menu li#dropdown a,
.dropline #menu li#dropline a,
.flyout #menu li#flyout a,
.support #menu li#support a,
.contact #menu li#contact a
{background:url(tab_a.gif) no-repeat right -10px; line-height:50px; color:#fff;}
#menu li a:hover b,
#menu li a:active b,
#menu li a:focus b,
.home #menu li#home a b,
.single #menu li#single a b,
.dropdown #menu li#dropdown a b,
.dropline #menu li#dropline a b,
.flyout #menu li#flyout a b,
.support #menu li#support a b,
.contact #menu li#contact a b
{background:url(tab_b.gif) no-repeat left -10px; line-height:50px;}

#bkgd {
	background-color: #FFF;
	background-image: url(images/bkgd_1px.jpg);
	background-repeat: repeat-x;
	width: 690px;
	position: absolute;
	left: 211px;
	top: 0px;
	z-index: 100;
	height: 300px;
}

#wrap {
	width:900px;
	background-image: url(images/bkgd_tan_wh900px.gif);
	background-repeat: repeat-y;
	position: absolute;
	top: 143
px;
	overflow: visible;
	height: auto;
	min-height: 100%;
}

Last edited by peter_budo; Oct 4th, 2009 at 7:28 am. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks).

•

Join Date: Oct 2006

Posts: 13

Reputation: urolicious is an unknown quantity at this point

Solved Threads: 2

urolicious urolicious is offline

Offline

Newbie Poster

#10

Oct 9th, 2009

when i get this kind of problem i find that it's usually due to uncleared floats...
you need to check that you have cleared all your floats.. looks like you haven't cleared div#leftbar