Member Avatar for decimo

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

  • 6 Contributors
  • 10 Replies
  • 2K Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by terri1210
Member Avatar for Quick_Silver69

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?

Edited by Quick_Silver69 because: updating
Member Avatar for decimo

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:

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

with:

#cleardiv {
clear:both;
}

Edited by decimo because: just tried something
Member Avatar for Troy III

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

FX353.png 9.62 KB IE6.02_.png 9.6 KB
Member Avatar for decimo

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;".

Member Avatar for Troy III

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.

Member Avatar for MidiMagic

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.

Member Avatar for Troy III

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.

Member Avatar for terri1210

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 [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%;
}
Edited by peter_budo because: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks).
Member Avatar for urolicious

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

Member Avatar for terri1210

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.