Just when I think that I'm winning in my battle to learn CSS I run into a brick wall. Maybe I can't see the forest for the trees, but could one of you guys take a look at this example HTML/CSS code and tell me what I'm doing wrong... why my "banner" DIV is slipping beneath my "searchbar" DIV... here's a link to a "live" version of this code:
http://homepage.mac.com/drewprops/ap...blem/index.htm
and here's the code itself:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
background-color: #d5d6d7;
color: #333;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
/* BREADCRUMBS---------------------------------------- */
ul#breadcrumbs {
float: left;
width: 750px;
list-style: none;
background: #728fa7;
font-size: 110%;
text-transform: capitalize;
padding: 3px 0;
margin: 0;
}
ul#breadcrumbs li {
display: inline;
font-size: 70%;
}
li.bread {
color: #ffffff;
text-decoration: none;
text-align: left;
padding-left: 10px;
}
li.style {
position: relative;
left: 240px;
color: #ffffff;
}
li.contact {
left: 385px;
position: relative;
color: #ffffff;
}
/* SEARCHBAR----------------------------------------- */
#searchbar {
float: left;
width: 750px;
list-style: none;
background: #728fa7;
font-size: 110%;
text-transform: capitalize;
padding: 3px 0;
margin: 0;
}
/* BANNER--------------------------------------- */
#banner {
width: 750px;
height: 100px;
margin: 0;
background-color: #99CC66;
background-image: url(banner.png);
}
p.banner {
visibility: hidden;
}
/* NAVIGATION MENU------------------------------ */
#nav {
float: left;
width: 750px;
margin: 0;
padding: 0;
list-style: none;
border-bottom: 3px solid #5c708e;
background: #728fa7;
font-size: 110%;
text-transform: capitalize;
}
#nav li {
float: left;
margin: 0;
padding: 0 1px 0 0;
list-style: none;
}
#nav a {
float: left;
padding: 7px 13px;
text-decoration: none;
border-bottom: none;
color: #fff;
border-right: 1px solid #47608a;
}
#nav a.active, #nav a:hover {
color: #fff;
}
/* SECTION IDENTIFICATION--------------------- */
#sectionID {
background: #5d7e8e 0px 0px;
color: #ffffff;
margin: 0;
padding-top: 3px;
padding-bottom: 3px;
float: left;
width: 750px;
text-align: left;
}
h2.sectionDesc {
padding-left: 35px;
text-transform: capitalize;
margin: 0;
font-style: italic;
font-size: 80%;
}
-->
</style>
</head>
<body>
<ul id="breadcrumbs">
<li class="bread"><span>You Are Here:</span> <strong><a href="">foo</a> > </strong>bar</li>
<li class="style">Something : </li>
<li class="contact"><a>Contact</a></li>
</ul>
<div id="searchbar">
<form method="get" id="searchform" action="">
<span>Search</span>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</form>
</div>
<div id="banner">
<p class="banner"><a href="">website</a></p>
</div>
<ul id="nav">
<li class="link_articles"><a class="active" href="">bar1</a></li>
<li class="link_podcasts"><a href="">bar2</a></li>
<li class="link_portfolio"><a href="">bar3</a></li>
<li class="link_gallery"><a href="">bar4</a></li>
<li class="link_downloads"><a href="">bar5</a></li>
<li class="link_shop"><a href="">bar6</a></li>
<li class="link_about"><a href="">bar7</a></li>
<li class="link_preferences"><a href="">bar8</a></li>
</ul>
<div id="sectionID">
<h2 class="sectionDesc">a description of bar1</h2>
</div>
</html>