Wrox Programmer Forums
|
BOOK: Beginning HTML, XHTML, CSS, and JavaScript
This is the forum to discuss the Wrox book Beginning HTML, XHTML, CSS, and JavaScript by Jon Duckett; ISBN: 978-0-470-54070-1
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning HTML, XHTML, CSS, and JavaScript section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old November 6th, 2012, 03:41 PM
Registered User
 
Join Date: Nov 2012
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Default Issue page 406/407 column height

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;
}
 
Old December 2nd, 2012, 06:52 PM
Authorized User
 
Join Date: Jul 2012
Posts: 13
Thanks: 0
Thanked 3 Times in 3 Posts
Default

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.





Similar Threads
Thread Thread Starter Forum Replies Last Post
Chapter 12, page 406 lansingmike BOOK: Beginning ASP.NET 3.5 : in C# and VB BOOK ISBN: 978-0-470-18759-3 8 May 18th, 2011 03:58 PM
Ch12 pg 406-407 (Try it Out)access db within VWD martycom BOOK: Beginning ASP.NET 4 : in C# and VB 6 August 24th, 2010 04:37 PM
Error on the page 407. Grace BOOK: Beginning Visual Basic 2005 ISBN: 978-0-7645-7401-6 2 July 12th, 2009 02:52 PM
Chapter 12 - Page 406 - Step 9 - Not showing up this way? jn148 BOOK: Beginning ASP.NET 3.5 : in C# and VB BOOK ISBN: 978-0-470-18759-3 7 December 14th, 2008 12:58 PM
Table column to stretch height on long page nbryson HTML Code Clinic 12 October 19th, 2005 05:12 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.