100% background colour in left div

**XiledWeb** · Sep 25, 2006 18:16

Quite a common question judging by some of the threads I've read looking for the answer.

I have my float left but the 100% height goes as far as the content - not the entire page. I want the background colour to stretch the length of the entire div.

Site here.

Code:

* {margin:0;padding:0}
h1,h2,h3,h4,p {margin-bottom:1em}
ul{margin-left:16px}

/* mac hide \*/
html,body{height:100%;}
/* end hide*/
body { 
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size : 11px;
	background:#ccccff; 
	color:#000;
	text-align:center;
}
#outer{
	min-height:100%;
	width:765px;
	margin-left:auto;
	margin-right:auto;
	background:transparent url(images/3-colcentred-bluewhite.gif) repeat-y center top;
	text-align:left;
	border-left:2px solid #fff;
	border-right:2px solid #fff;
	position:relative;
}
* html #outer {
	width:771px;
	w\idth:765px;
	height:100%;
}
#header, #footer{
	background:#ffffcc;
	border-top:5px solid #fff;
	border-bottom:5px solid #fff;
	text-align:center;
}
#footer{
	position:absolute;
	bottom:0;
	left:0;	
	width:765px;
	height:40px;
}
* html #footer {
	height:50px;
	he\ight:40px;
	bottom:-1px;
}
#clearfooter {
	clear:both;
	height:50px;
}
#content {
	float:left;
	padding:2px;
}
#left {
  float:left;
  background-color:#e4e0cd;
  width:180px;
}
#content{width:500px;}
.clearer{
	height:1px;
	overflow:hidden;
	clear:both;
	margin-top:-1px;
}

**Raffles** · Sep 25, 2006 18:27

Have a look at the templates on pmob.co.uk, this one in particular I think is probably what you're after: http://www.pmob.co.uk/temp/2colcentred_contentfirst.htm

Also note the one that uses a background image to achieve the same effect: http://www.pmob.co.uk/temp/2_col_centred_imgbg.htm

Faux Columns is quite a famous article that solves your problem: http://alistapart.com/articles/fauxcolumns/

But I prefer the other method (the first link).

**XiledWeb** · Sep 25, 2006 18:38

So what you're saying is, I can only have the background colours height at 100% if its an image? Surely that can't be?

**Raffles** · Sep 25, 2006 18:48

No, you can do it without them. Have a look at this: http://www.cssplay.co.uk/layouts/threecol.html
It's 3 columns, but the same principle applies.

**XiledWeb** · Sep 25, 2006 19:23

Ok, so I bit the bullet and went with a background image. I used a gif and got it to repeat. But I'm still not getting the full 100% height effect.

Code:

* {margin:0;padding:0}
h1,h2,h3,h4,p {margin-bottom:1em}
ul{margin-left:16px}

/* mac hide \*/
html,body{height:100%;}
/* end hide*/
body { 
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size : 11px;
	background:#ccccff; 
	color:#000;
	text-align:center;
}
#outer{
	min-height:100%;
	width:765px;
	margin-left:auto;
	margin-right:auto;
	background:transparent url(images/3-colcentred-bluewhite.gif) repeat-y center top;
	text-align:left;
	border-left:2px solid #fff;
	border-right:2px solid #fff;
	position:relative;
}
* html #outer {
	width:771px;
	w\idth:765px;
	height:100%;
}
#header, #footer{
	background:#ffffcc;
	border-top:5px solid #fff;
	border-bottom:5px solid #fff;
	text-align:center;
}
#footer{
	position:absolute;
	bottom:0;
	left:0;	
	width:765px;
	height:40px;
}
* html #footer {
	height:50px;
	he\ight:40px;
	bottom:-1px;
}
#clearfooter {
	clear:both;
	height:50px;
}
#content {
	float:left;
	padding:2px;
}
#left {
  min-height:100%;
  width:180px;
  float:left;
  background:url(images/left_navbg.gif) repeat-y left top;
}
#content{width:500px;}
.clearer{
	height:1px;
	overflow:hidden;
	clear:both;
	margin-top:-1px;
}