-1

Wrapper div adapt to height of nested div?

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

decimo

Newbie Poster

7 posts since Sep 2009

Reputation Points: 10

Solved Threads: 0

2 Years Ago

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?

Quick_Silver69

Junior Poster in Training

60 posts since Aug 2009

Reputation Points: 19

Solved Threads: 2

2 Years Ago

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:

<!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 :P I'm still kind of a noob with css..

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

with:

#cleardiv {
clear:both;
}

decimo

Newbie Poster

7 posts since Sep 2009

Reputation Points: 10

Solved Threads: 0

2 Years Ago

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

Attachments

Troy III

Practically a Master Poster

609 posts since Jun 2008

Reputation Points: 120

Solved Threads: 80

2 Years Ago

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

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

decimo

Newbie Poster

7 posts since Sep 2009

Reputation Points: 10

Solved Threads: 0

2 Years Ago

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

Well, thanks, yeah :P 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

Practically a Master Poster

609 posts since Jun 2008

Reputation Points: 120

Solved Threads: 80

2 Years Ago

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

Nearly a Senior Poster

3,319 posts since Jan 2007

Reputation Points: 730

Solved Threads: 182

2 Years Ago

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

Practically a Master Poster

609 posts since Jun 2008

Reputation Points: 120

Solved Threads: 80

2 Years Ago

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:

<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:

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  <a href="http://www.cssmenus.co.uk">http://www.cssmenus.co.uk</a> 
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%;
}

terri1210

Newbie Poster

3 posts since Oct 2009

Reputation Points: 10

Solved Threads: 0

2 Years Ago

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

urolicious

Newbie Poster

13 posts since Oct 2006

Reputation Points: 14

Solved Threads: 2

2 Years Ago

Thanks for the post. Somehow I got it to work without clearing the float. Trial and error...

terri1210

Newbie Poster

3 posts since Oct 2009

Reputation Points: 10

Solved Threads: 0

This article has been dead for over three months

You