Forum Moderators: not2easy
#clear {
clear: both;
}
#container {
margin: 0px auto;
text-align: left;
width: 620px;
background: #ffffff url(shading2.gif) repeat-y 50% 0;
}
#bordertop {
width: 600px;
border-top: 1px solid #8d8d8d;
}
#borderbottom {
width: 600px;
border-bottom: 1px solid #8d8d8d;
}
h1 {
text-indent: -9999px;
width: 540px;
height: 100px;
background: #0080FD url(zarastudios.gif) no-repeat;
margin: 10px 20px;
padding: 10px 20px;
display: block;
}
#left {
width: 200px;
float: left;
padding: 2px;
}
#center {
width: 200px;
float: left;
padding: 2px;
}
#right {
width: 200px;
float: right;
padding: 2px;
}
#header, #footer {
width: 620px;
background: #ffffff url(shading.gif) repeat-y 50% 0;
}
#footer h2 {
background: #E8E8E8;
padding: 10px 20px;
margin: 10px 20px;
letter-spacing: .04em;
text-align: right;
font: normal 10px Arial, Verdana, Helvetica, sans-serif;
}
#left a:link, #left a:visited, #left a:active, #center a:link, #center
a:visited, #center a:active, #right a:link, #right a:visited, #right
a:active, #footer a:link, #footer a:visited, #footer a:active {
color: #0080FD;
text-decoration: none;
}
#right a:hover, #left a:hover, #center a:hover, #footer a:hover {
color: #0080FD;
border-bottom: 2px dashed #FFFF40;
}
.image {
padding: 5px;
background-color: #ffffff;
border: 1px solid #808080;
display: block;
}
.highlight {
background: #E8E8E8 url(bullet2.gif) no-repeat;
padding: 0 17px;
margin: 0 17px;
font-weight: bold;
}
p {
font: 11px/18px Arial, Verdana, Helvetica, sans-serif;
padding: 10px;
margin: 10px;
letter-spacing: .04em;
}
And here's the xhtml:
<!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>
<title>zarastudios::clean functional creative::graphic design::the work of aja abney</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="zaraimages/style.css" />
</head>
<body link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">
<div align="center">
<div id="container">
<div id="header">
<div align="center"><div id="bordertop"></div></div>
<h1>zarastudios::clean functional creative::graphic design::the work of aja abney</h1>
</div>
<div id="left">
<p class="highlight">Services</p>
<p>
The primary focus of ZaraStudios is the creation of clean, functional
websites for my clients. I am available for projects in the following areas:
</p>
<p>
<b>::Design:</b>
<br />Identity
<br />Graphic Design
<br />Websites
<br />Print Communications
</p>
<p>
<b>::Technology:</b>
<br />Application/Database Design
<br />Websites
<br />GUI Design (Graphical User Interface)
<br />e-Commerce/Shopping Cart
</p>
<p class="highlight">Qualifications</p>
<p>
Flash MX <br />
Photoshop, Paint Shop Pro<br />
XML / HTML / CSS<br />
ASP, PHP, dHTML & Javascript<br />
E-commerce / SSL<br />
Photography<br />
Editing
</p>
<p class="highlight">Contact</p>
<p>
<b>Aja Abney<br />
</b>201 Cornerstone Ct<br />
Columbia, MO 65203<br />
jamesandaja@netzero.net
</p>
</div>
<div id="center">
<p class="highlight">News</p>
<p>
<b>::12-11-04:</b> Site redesign</p>
<p>
<b>::12-05-04:</b> <a href="http://www.izones.net" target="_blank"><i>iZones.net</i></a>
login page redesign</p>
<p>
<b>::11-01-04:</b> <a href="http://www.bryanbrownmusic.com" target="_blank"><i>Bryan
Brown</i></a> site launch</p>
<p>
<b>::09-01-04:</b> <a href="http://www.christianfellowship.com" target="_blank"><i>Christian Fellowship of Columbia</i></a> site redesign</p>
<p><b>::07-30-04:</b> <i><a href="http://www.healingroomsofcolumbia.org" target="_blank">Healing Rooms of Columbia</a></i> site launch</p>
<p class="highlight">Featured Project</p>
<p>
<b>Healing Rooms of Columbia</b>
</p>
<p><a href="http://www.healingroomsofcolumbia.org" target="_blank"><img border="0" src="zaraimages/healingroomssite.jpg" class="image" alt="Healing Rooms of Columbia" /></a></p>
<p>This site was designed for the <b><a
href="http://www.healingroomsofcolumbia.org" target="_blank">Healing Rooms of
Columbia</a></b>, a ministry offering prayer for emotional and physical
healing. </p>
<p>Features on the site include an updated<i> </i><b>logo</b>, overall <b>site
design</b> and a <b>form</b> that authorized users can use to add, edit and
organize testimonies on the site. </p>
<p>This site uses <b>HTML</b>, <b>CSS</b>, <b>PHP</b> and <b>Javascript</b>.</p>
</div>
<div id="right">
<p class="highlight">Recent Work</p>
<p>
<b>Websites</b>
</p>
<p><a href="http://www.christianfellowship.com" target="_blank"><img border="0" src="zaraimages/cfcwebsite.jpg" class="image" alt="Christian Fellowship of Columbia" /></a></p>
<p>Christian Fellowship of Columbia redesign. This site uses <b>HTML</b>,
<b>XML</b>, <b>CSS</b>, <b>ASP</b> and <b>Javascript</b>.</p>
<p><img border="0" src="zaraimages/shanewebsite.jpg" class="image" alt="Shane & Shane" /></p>
<p>
<b>Logos</b>
</p>
<p>
<a href="http://www.zarastudios.com/abneys/audrey" target="_blank"><img border="0" src="zaraimages/audrey_small.gif" class="image" alt="Audrey Grace Logo" /></a></p>
<p>
A logo created for my daughter's website.
</p>
</div>
</div>
<div id="clear"></div>
<div id="footer">
<h2>©2004 <a href="index2.php"> ZaraStudios</a> and Aja Abney</h2>
<p>
<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88" /></a>
<a href="http://jigsaw.w3.org/css-validator/"><img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" height="31" width="88" /></a>
</p>
<div align="center"><div id="borderbottom"></div></div>
</div>
</div>
</body>
</html>
Any help would be appreciated. Thanks.
The solution is to float the #container. This forces the container to expand and enclose it's floated children.
IE and Opera do this automatically, but it is a spec violation to do so. Firefox and NS7 have it right. Floats should not be contained unless the designer specifically instructs the browser to do so (by floating the container).
Regardless, add float:left; to #container and you should be fine.
On a side note, your post above is very long and much, if not most, of what is there is not relevant to the problem you're trying to solve. It's helpful if you pare down the code prior to posting so that we're only looking at the relevant peices, rather than the entire page.
cEM
Sorry about the long post.
No problem. I didn't mean for that to sounds like a criticism. WebmasterWorld is a unique forum that takes some getting used to; learning how things work here is one of the challenges, but in the long run makes participation that much more valuable.
And because I neglected to say it before...Welcome to WebmasterWorld!.
cEM
