Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
BOOK: Professional CSS: Cascading Style Sheets for Web Design
This is the forum to discuss the Wrox book Professional CSS: Cascading Style Sheets for Web Design by Christopher Schmitt, Mark Trammell, Ethan Marcotte, Dunstan Orchard, Todd Dominey; ISBN: 9780764588334
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Professional CSS: Cascading Style Sheets for Web Design section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old February 24th, 2008, 11:13 PM
Registered User
 
Join Date: Feb 2008
Location: , , .
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default 3 column layout

Having problem's getting white space in between the top left and right columns of the bottom header, they are just appearing butted up to the bottom, here is my code, any help would be great, and greatly appreciated. thanx.

<!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>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>3 Column Layout wrox</title>
<link rel="stylesheet" type="text/css" href="3columcss.css" media="all" />
</head>
<body>
<div id="header">
<center>
<p>How do you like those apples</P>
</center>

</div>
<div id="container">

 <div id="left">
<h2>This is the left column.</h2>[list]
<li><a href="http://echoecho.com/">Link 1</A></li>
<li><a href="http://echoecho.com/">Link 2</a></li>
<li><a href="http://echoecho.com/">Link 3</A></li>

</ul>
<p>Some basic information goes here.</p>


</div>

<div id="right">
<h2>This is the right column.</h2>[list]
<li>Did you know that lists rock</li>
<li>they do</li>
<li>Quite a bit.</li>
</ul>
more information goes here
<p>
<P>
fgfgfdgfggfgfgfgfgfgfgfgfg
gfgfdgfgfgggfdgfgfgfgggfdg
gfgfgfgfggfggfggfgfgfffggfg
gfgfgfgfgfdggfgfgfgfgfgfgf
gfgfgfgfgfgfgfgfgfgfgfgfgfg
gfgfgfgfgfgfgfgffgfgfgfgfgf
gfgfgfgfgfgfgfgfgfgfgfgfgfgfd

gfgfgfgfdgfgfgfgfgfgfgfgfgf
gfgfgfgfgfgfgfgfgfgfgfffgfg
fgfgfgfgfgfgfgfgfgfgfgfgfgf
gfgfgfgfgfgfgfgfgfgfgfgfgfgfgf



</div>
<div id="content">
<h1> Welcome to my home page layout.</h1>

Certe, inquam, pertinax non ero tibique, si mihi probabis ea...<br>
hgfhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhgfhgfhgfhhhhhhhh< p>
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh< p>
hgfhgfhhfghhgfhgfhgfhhhhhgfhgfhghgfhgfhgfhgfhghgfd hghgdhg<p>
hgfhgfhhgfhhnbnbnhhfhgfhfghfhfghgfhfghfghfhhfhfghh hhhgfhfh<p>

<p>
khhohoioiooioi<br>
njhjijjjhjhjkl<br>
lpppp[op[pp[p<br>

hgguigiu
<p>
cghjcghjcghjcgh<br>
gyuoigyugyuiog
<p>
bjhuhbjuhbjkhbjkbjk<br>

bhyughyou
dfdsfdsfdsfsdffdsfsdfdfffsdfsdffsffffdsfdsfffffdfd fdfdf<P>
dfdsfdsfdffffdfdsfdsfdfdfdsfdfdfdfdfdfdfdfdfdfdfdf dfdfd<P>
fdfdfdffdfdsfdsdsfdsffffdsfdsfddfdsfdfdfdfdfdfddfd fdsfds|<P>


</div>

<div id="footer">

<p>Them aplles are <em>tasty</em>.</p>
</div>

</body>
</html>

css.page

body {
     color: #000;
     font: 76%/1.5em " Lucida Grande", Verdana, Geneva, Helvetica, sans-serif;
     margin: 0;
     padding: 0;
}

h1, h2 {
     font-family: "Trebuchet mS", Verdana, Geneva, Helvetica, sans-serif;
     font-weight: normal;
     line-height: 1em;
     margin-top: 0;
     }

#header {
     background-color: #DFD;
     border: 2px solid #060;
     }

#footer {
    background-color: #FDD;
    border: 1px solid #C00;
    }

#left, #right {
    background-color: #DDF;
    border: 2px solid #00C;
    }

#header hr, #footer hr {
    display: none;
    }

#left {
    position: absolute;
    left: 0;
    top: 0;
    width: 175px;
    }

#right {
    position: absolute;
    right: 0;
    top: 0;
    width: 175px;
    }

#container {
    position: relative;
    }

#content {
    margin: 0 190px;
}










Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
IE 6 & 7 issues in two column layout Cyber Shiva BOOK: CSS Instant Results 0 July 7th, 2008 04:47 AM
2-column layout kennethjaysone CSS Cascading Style Sheets 2 January 12th, 2008 06:44 AM
Center two column layout nloding CSS Cascading Style Sheets 1 June 21st, 2006 01:11 PM
three-column layout help DSteven CSS Cascading Style Sheets 8 December 28th, 2004 10:02 AM
layout adflynn Java GUI 0 November 9th, 2004 06:33 AM



All times are GMT -4. The time now is 12:30 PM.


Powered by vBulletin® Version 3.7.0
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.