How can I create 2 more columns that are the same size as <div id=“left”>
I want one in the center and the other to the right? I can’t center the footer either
HELP!
Thank you
<!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>College</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
body {
margin: 0px;
padding: 0px;
font-size: 1em;
line-height: 135%;
font: Arial, Helvetica, sans-serif;
background-color: #b8af8d;
}
#wrapper {
border: 1px solid #0000FF;
margin: 0px auto;
padding: 0px;
width: 700px;
height: auto;
background-color: #FFFFCC;
}
#header {
width: 700px;
height: 125px;
background-color: #00F;
}
#nav {
width: 700px;
height: 45px;
background-color: #6CF;
}
#nav ul { margin-top: 6px;
margin-bottom: 5px;
margin-left: 25px;
padding-left: 0pt;
}
#nav ul li { l
ist-style-type: none;
display: inline;
padding-right: 20px;
color: #660099;
font-weight: bold;
}
#nav a { text-decoration: none;
}
#nav a:link { color: #ffffff;
text-decoration: none;
}
#nav a:visited {
color: #FFFFFF;
}
#nav a:hover {
color: #e5e3d7;
}
#nav a:active {
color: #ceb6af;
}
#container { width: 760px;
height: auto;
}
h1 { color: #fff;
padding: 1px;
margin-top: 25px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 15px;
}
#left {
width: 175px;
height: auto;
background-color: #FFFFCC;
float: left;
margin-top: 15px;
margin-left: 15px;
margin-bottom: 15px;
padding-top: 5px;
padding-bottom: 10px;
float: left;
}
#clear { clear: both;
width: auto;
height: 1px;
}
#footer {
width: 665px;
height: 55px;
background-color: #03F;
text-align: center;
color: fff;
font-size: 0.75em;
}
p {
padding: 5px:
}
<body>
<div id="wrapper">
<div id="header">
<h1>College</h1>
</div> <!--end of header -->
<div id="nav">
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">WWW 131</a></li>
<li><a href="#">WWW 132</a></li>
<li><a href="#">WWW 141</a></li>
</ul>
</div><!--end of nav -->
<div id="left">
<h3>WWW 131</h3>
<p>Course expands basic development of Web pages. Content focuses on the use of Cascading Style Sheet to present the content of a well structured XHTML document in a meaningful method./>
</p>
</div>
<div id="clear"></div>
</div>
<div id="footer">
<p> College</p>
</div>
</div>
</div>
</body>
</html>
Try this:
<?php /* */ ?>
<!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>College</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type='text/css'>
@charset "utf-8";
/* CSS Document */
* {margin: 0;padding: 0;}
body {font-size: 1em;line-height: 135%;font: Arial, Helvetica, sans-serif;background-color: #b8af8d;}
#wrapper {border: 1px solid #0000FF;margin: 0px auto;padding: 0px;width: 700px;height: auto;
background-color: #FFFFCC;}
#header {width: 700px;height: 125px;
background-color: #00F;}
#nav {width: 700px;height: 45px;
background-color: #6CF;}
#nav ul { margin-top: 6px;margin-bottom: 5px;margin-left: 25px;padding-left: 0pt;}
#nav ul li { list-style-type: none;display: inline;padding-right: 20px;color: #660099;font-weight: bold;}
#nav a { text-decoration: none;}
#nav a:link { color: #ffffff;text-decoration: none;}
#nav a:visited {color: #FFFFFF;}
#nav a:hover {color: #e5e3d7;}
#nav a:active {color: #ceb6af;}
#container { width: 760px;height: auto;}
h1 { color: #fff;padding: 1px;margin-top: 25px 15px 10px 15px;}
.left {float: left; width:28%; margin:1% 1% 1% 2%; height: auto;
background-color: #FFFFCC;padding:5px;
padding-top: 5px; padding-bottom: 10px;}
#clear { clear: both;width: auto;height: 1px;}
#footer {width: 665px;width:100%;height: 55px;background-color: #03F;
text-align: center;color: fff;font-size: 0.75em;}
p {padding: 15px;}
.bg1 {background:#cfc none;color:#000}
.bg2 {background:#ff0 none;color:#000}
.bg3 {background:#cff none;color:#000}
div {outline:dotted 0px #f00}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>College</h1>
</div> <!--end of header -->
<div id="nav">
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">WWW 131</a></li>
<li><a href="#">WWW 132</a></li>
<li><a href="#">WWW 141</a></li>
</ul>
</div><!--end of nav -->
<div class="left bg1">
<h3>WWW 131</h3>
Course expands basic development of Web pages. Content focuses on the use of
Cascading Style Sheet to present the content of a well structured XHTML
document in a meaningful method.
</div>
<div class="left bg2">
<h3>WWW 131</h3>
Course expands basic development of Web pages. Content focuses on the use of
Cascading Style Sheet to present the content of a well structured XHTML
document in a meaningful method.
</div>
<div class="left bg3">
<h3>WWW 131</h3>
Course expands basic development of Web pages. Content focuses on the use of
Cascading Style Sheet to present the content of a well structured XHTML
document in a meaningful method.
</div>
<div id="clear">
</div>
<div id="footer">
<p>
College
</p>
</div>
</div><!-- wrapper -->
</body>
</html>
.
You know, you’re supposed to do the homework yourself. 
I think I’d simplify the markup a bit, and make some of the tokens a bit more semantic.
I also did not make all three columns the same width, making the center column a bit wider, as is common.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator"
content=
"HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org" />
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
/*<![CDATA[*/
/*Lose this. It's redundant make-work*/
/*
* {
margin: 0;
padding: 0;
}
*/
body {
margin: 0px;
padding: 0px;
font-size: 1em;
line-height: 135%;
font: Arial, Helvetica, sans-serif;
background-color: #b8af8d;
}
h1 {
color: #fff;
margin: 25px 15px 10px;
}
#wrapper {
border: 1px solid #0000FF;
margin: 0px auto;
width: 700px;
height: auto;
background-color: #FFFFCC;
}
#header {
height: 125px;
background-color: #00F;
padding-top: 1px; /*blocks margin-collapse*/
}
ul#nav {
height: 45px;
background-color: #6CF;
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
ul#nav li {
display: inline;
padding: 6px 20px;
color: #660099;
font-weight: bold;
}
#nav a {
text-decoration: none;
}
#nav a:link,
#nav a:visited {
color: #ffffff;
}
#nav a:hover {
color: #e5e3d7;
}
#nav a:active {
color: #ceb6af;
}
#container {
background-color: #FFFFCC;
overflow: hidden; /*encloses float elements*/
zoom: 1; /*for IE6*/
}
.sidebar {
width: 175px;
float: left;
margin: 15px 10px 0;
padding: 5px 5px 10px;
}
#main {
float: left;
width: 270px;
margin: 15px 0 0;
padding: 5px 10px 10px;
}
/*unnecessary*/
/*
#clear { clear: both;
width: auto;
height: 1px;
}
*/
#footer {
width: 665px;
height: 55px;
margin: 0 auto;
background-color: #03F;
text-align: center;
color: #fff; /*don't forget the octothorpe*/
font-size: 0.75em;
}
/*]]>*/
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>College</h1>
</div><!--end of header -->
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">WWW 131</a></li>
<li><a href="#">WWW 132</a></li>
<li><a href="#">WWW 141</a></li>
</ul>
<div id="container">
<div class="sidebar">
<h3>WWW 131</h3>
<p>Course expands basic development of Web pages. Content
focuses on the use of Cascading Style Sheet to present the
content of a well structured XHTML document in a meaningful
method.</p>
</div>
<div id="main">
<h3>WWW 131</h3>
<p>Course expands basic development of Web pages. Content
focuses on the use of Cascading Style Sheet to present the
content of a well structured XHTML document in a meaningful
method.</p>
</div>
<div class="sidebar">
<h3>WWW 131</h3>
<p>Course expands basic development of Web pages. Content
focuses on the use of Cascading Style Sheet to present the
content of a well structured XHTML document in a meaningful
method.</p>
</div>
</div><!-- end container -->
<div id="footer">
<p>College</p>
</div>
</div> <!-- end wrapper -->
</body>
</html>
cheers,
gary