Ad:

HTML and CSS Discussion Thread
Unsolved
Views: 12120

Page 1
2
Next

You are currently viewing page 1 of this multi-page discussion thread

Sep 16th, 2009

-1

Wrapper div adapt to height of nested div?

Expand Post »

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).

Similar Threads

createElement wont show table/div in JavaScript / DHTML / AJAX
Div Min-Height in HTML and CSS
3 column layout with multiple divs in HTML and CSS
Spellchecker Remote in JavaScript / DHTML / AJAX
need help plz in JSP

decimo

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

7 posts
since Sep 2009

Permalink

Sep 16th, 2009

Re: Wrapper div adapt to height of nested div?

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

Quick_Silver69

Reputation Points: 19

Solved Threads: 2

Junior Poster in Training

Offline

60 posts
since Aug 2009

Permalink

Sep 16th, 2009

Re: Wrapper div adapt to height of nested div?

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:

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

decimo

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

7 posts
since Sep 2009

Permalink

Sep 17th, 2009

Re: Wrapper div adapt to height of nested div?

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

Attached Thumbnails

Click image for larger version

Name: IE6.02.png
Views: 376
Size: 9.6 KB
ID: 11657

Click image for larger version

Name: FX353.png
Views: 338
Size: 9.6 KB
ID: 11658

Troy III

Reputation Points: 120

Solved Threads: 61

Posting Pro

Offline

505 posts
since Jun 2008

Permalink

Sep 18th, 2009

Re: Wrapper div adapt to height of nested div?

Click to Expand / Collapse Quote 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;".

decimo

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

7 posts
since Sep 2009

Permalink

Sep 19th, 2009

Re: Wrapper div adapt to height of nested div?

Click to Expand / Collapse Quote originally posted by Troy III ...

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

Click to Expand / Collapse Quote 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.

Troy III

Reputation Points: 120

Solved Threads: 61

Posting Pro

Offline

505 posts
since Jun 2008

Permalink

Sep 26th, 2009

Re: Wrapper div adapt to height of nested div?

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.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Sep 26th, 2009

Re: Wrapper div adapt to height of nested div?

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.

Troy III

Reputation Points: 120

Solved Threads: 61

Posting Pro

Offline

505 posts
since Jun 2008

Permalink

Oct 2nd, 2009

Re: Wrapper div adapt to height of nested div?

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:

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:

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).

terri1210

Reputation Points: 10

Solved Threads: 0

Newbie Poster