Issue page 406/407 column height

tivonna · November 6th, 2012, 03:41 PM

So I was messing with the CSS in the book, but I cannot seem to make my columns extend down to equal heights like on page 407. I even tried my own background image, but despite the image (a darker grey) showing up it will not extend the columns. This gave bad results....some tweaking made the color show up in the boxes but not change the height at all....

body {

margin:0px;

background-color:#000000;

font-family:arial, verdana, sans-serif;

text-align:center;}

#frame {

margin-left:auto;

margin-right:auto;

width:960px;

text-align:left;
background-color:#ffffff;
background-image:url("square-grey-box.gif")
}

#page {

margin:0px 10px 10px 10px;}

#header {

background-color:#cccccc;

padding:10px;

height:120px;
text-align:center;}

#navigation {

background-color:#efefef;

padding:10px;
height:40px;}

#footer {

background-color:#cccccc;

padding:10px;

height:40px;

clear:both;

border-top:20px solid #ffffff;}

.column1of3 {

float:left;

width:230px;

background-color:#cccccc;

padding:10px;

margin-top:20px;

}

.column1of3, .column2of3 {margin-right:20px;
}

.column2of3 {

float:left;

width:380px;

background-color:#cccccc;

padding:10px;

margin-top:20px;
}

.column3of3 {

float:left;

width:230px;

background-color:#cccccc;

padding:10px;

margin-top:20px;
}

RManFlint · December 2nd, 2012, 06:52 PM

Try this:

Code:

body {	
  margin:0px;
  background-color:#000000;
  font-family:arial, verdana, sans-serif;

  
}
	
#frame {
  margin-left:auto;
  margin-right:auto;
  width:960px;
  background-color:#ffffff;
  background-image:url("http://p2p.wrox.com/images/960px_3column_background.gif");
  background-repeat:repeat-y;}

#page {margin:0px 10px 10px 10px}

#header {
  background-color:#cccccc;
  padding:10px;
  height:120px;}

#navigation {
  background-color:#efefef;
  padding:10px;
  height:40px;}

#footer {
  background-color:#cccccc;
  height:40px;
  padding:10px;
  clear:both;
  border-top:20px solid #ffffff;}

.column1of3, .column2of3, .column3of3 {
  float:left;
  width:280px;
  background-color:#cccccc;
  padding:10px;
  margin-top:20px;
  }

.column1of3, .column2of3 {
  margin-right:20px;}

Don't feel bad. Apparently, this example drove me up the wall as well as it appears I took a couple days to figure it out.