Jump to content

Div Refuses To Strech


feytus
 Share

Recommended Posts

Hey again! I'm trying to make my content box stretch at least 100% of the browser port, and has therefore set the style of all my divs to be min-height 100%, BUT, it doesn't really work. My main content div refuses to stretch, and I have no idea why. Here's the css code;

html{		min-height: 100%;		}body{	margin: 0;	padding: 0;	font-family: Verdana, "Lucida Grande", Tahoma, Helvetica, sans-serif;	color: #000;		background-color: #fbf1a8;		background-image:url('http://www.marsmelons.com/images/122.jpg');		background-attachment:fixed;		z-index: -1;		min-height: 100%;				}blockquote, h3, p, li{	padding-right: 10px;	padding-left: 10px;	font-size: 0.720em;	line-height: 1.5em;}blockquote{	margin-right: 0;	margin-left: 20px;}h1, h2, h3{	margin: 0 0 15px 0;	padding: 0 10px;	font-weight: normal;}h1, h2{	font-family: Georgia, Times, serif;}h1{	font-size: 1.4em;		margin-bottom: 0;}h2{	font-size: 1em;	font-style: italic;}h4{	   font-family: Georgia, Times, serif;	   font-weight: strong;	   font-size: 0.725em;}h5{	   font-family: Georgia, Times, serif;	   font-weight: normal;	   font-size: 8px;}hr{	margin: 2em auto;	width: 370px;	height: 1px;	color: #7a7e7d;	background-color: #7a7e7d;	border: none;}small, .small{	font-size: 1em;}a{	text-decoration: none;		color: #000;		border-bottom: 1px #000 solid;}a img{	border: none;		display: block;}h1 a, h2 a, h3 a{	border: none;		color: #000;	   }h3 a{	font: 1.5em Georgia, Times, serif;	}#site-name a{	border: none;}#sidebar-2 a, #sidebar-1 a{	color: #000;	border: none;}#accessibility{	position: absolute;	top: -10000px;		min-height: 100%;}#container {background-image:url(http://www.marsmelons.com/images/143.gif);background-position:824px 900px;background-repeat:no-repeat;min-height:100%;/*margin:0 auto;*/overflow:hidden;width:990px;}#right-container {background-image:url(http://www.marsmelons.com/images/152.gif);background-position:829px 386px;background-repeat:no-repeat;min-height: 100%;/*margin:0 auto;*/overflow:hidden;width:990px;}#left-container {background-image:url(http://www.marsmelons.com/images/149.jpg);background-position:180px 600px;background-repeat:repeat-y;min-height: 100%;/*margin:0 auto;*/overflow:hidden;width:950px;}#head{	text-align: center;}#sidebar-1{	margin-right: 5px;	margin-left: 0px;	float: left;	text-align: right;	width: 313px;	padding: 0px;	border: 0px solid gray;	position: absolute;	left: 0px;	top: 0px;		min-height: 100%;	   }#sidebar-2{	margin-left: 10px;	float: right;	position: absolute;	left: 819px;	background-color: #bebe8a;	padding: 8px;	top: 0px;	border: none;}.section_list{	margin: 0 0 10px 0;	padding: 0;	list-style-type: none;}.section_list ul{	list-style-type: none;}.section_list li{	margin: 0 10px 2px 0;	padding: 0;}#content {background-color:#FBF1A8;left:313px;margin:0;padding-left:5px;padding-right:5px;padding-top:30px;/*position:absolute;*/position:relative;width:501px;min-height:100%;}#foot{	margin-top: 5px;	clear: both;	text-align: center;		background-color: #fbf1a8;		font-size; 0.725em;}#sidebar-1, #sidebar-2{	\width: 150px;	w\idth: 150px;}#sidebar-2 p, #sidebar-1 p{	font-size: 0.8em;	line-height: 1.5em;}.caps{	font-size: 0.9em;	letter-spacing: 0.1em;}div.divider{	margin: 2em 0;	text-align: center;}.directory{	list-style-type: circle;}.author{	font-style: normal;	font-size: 0.75em;		padding-left: 10px;}.published{	font-size: 0.8em;}.padding-left {  padding-left: 7px;}.right {  text-align: right;  padding-left: 15px;}.padding-right {  padding-right: 2em;}.padding-top {  margin-top: 5px}.margin-right {  margin-right: 5px}.posted-by {  margin-left: 10px;  font-size: 0.725em;}.comments_error{	color: #000;	background-color: #fff4f4;}.comments-wrapper{font-size: 0.710em;padding-left: 10px;} input{color: #000;background: #fee3ad;border: 1px solid #b8a968}.submit input{color: #000;background: #ffa20f;border: 1px #b8a968} textarea{width: 250px;height: 150px;color: #000;background: #fee3ad;border: 1px solid #b8a968}ul.comments_error{	padding: 0.3em;	list-style-type: circle;	list-style-position: inside;	border: 2px solid #fdd;}div#cpreview{	color: #000;	background-color: #f1f1f1;	border: 2px solid #ddd;}form#txpCommentInputForm td{	vertical-align: top;}#comments-help{	margin: 2px 0 15px 0;	font-size: 0.7em;}.error-status{	font: 1.3em Georgia, Times, serif;}.playerleftbgcolor: #f0dd74; slidercolor: #c6b67a; trackcolor: #dec66c; rightbghovercolor:"#c6b877; lefticoncolor: #61453a; rightbgcolor: #dec970; loadercolor: #ebe2a0; bordercolor: #c4b87c; bgcolor: #fbf1a9; righticoncolor: #fbf1a9;{

And check this site for an example of it not working;http://www.marsmelons.com/articles/I've checked with Firebug, and it seems like the "container"-div is the problem, but I don't see why, as I've set it to min-height: 100%, and same with body, and also html to be really sure, hehe. I've also tried setting the html to only 100%, without the min-height attribute, but made no change.Any suggestions? Any clues at all will be much appreciated. :)

Link to comment
Share on other sites

All ancestor elements have to have a height defined (which can also be done with min-height), if there's one that doesn't then the element won't stretch.Does your HTML document have a Strict DTD?

Link to comment
Share on other sites

No, I'm using Transitional, which is the default for textpattern (the CMS I've built the site around). Do you reckon I should change it do Strict?Oh, and all elements (html, body and containers) have min-height set to 100%, every div except for the right sidebar div, but that is placed within a container, so it shouldn't really matter.Edit. Tried setting the doctype to strict now, it does some all around changes to the site, some margins here and there, but it doesn't change the problem I have with the div.Any other suggestions?

Edited by feytus
Link to comment
Share on other sites

setting min-height: 585px; won't work for IE6, best solution is to find the height difference between left and right side panels, and then add this height as padding-bottom (around 178px;) to content div.if content height is not more than the right side panel, its height matches the right panel height. by adding the difference between left and right panel to padding-bottom, it will match the left panel, and now give the required effect.there are numerous sites about this problem, one workaround is explained at http://blog.whirix.com/2008/11/cross-brows...and-others.htmlwhich uses this min-height: 100px;height: auto !important;height: 100px;

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...