I have a 3 column layout that works fine in FF (of course) And when I use the Web Developer tool bar it shows plenty of room between the 3 divs. Same with the IE7 tool bar. It shows that there is plenty of room between the divs, yet the 3rd div drops down.
---------
Here is the css:
* {
margin: 0px;
padding: 0px;
border: 0px;
list-style-type: none;
text-decoration: none;}
body {
background-color: #D6DFE4;
/*#EAD8D4;*/
}
html, body {
margin: 2px;
text-align: center;
font-size: 100.01%;
font-family: Arial, Verdana, sans-serif;
color: #1D0A04;
}
div#mainwrapper {
width: 804px;
text-align: left;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}
div#wrapper {
width: 804px;
float:left;
}
div#hd {
width: 804px;
margin: auto;
}
.seagull {
border: 4px groove #71726D;
margin-right: auto;
margin-left: auto;
}
div#hdnav {
Width: 804px;
height: 50px;
float: left;
text-align: center;
}
/*header nav styles start here*/
div#hdnav ul {
}
div#hdnav ul li {
display: inline;
font-size: ,8em;
}
/*header nav styles end here*/
/*left nav styles begin here*/
div#leftnav {
float: left;
width: 162px;
/*background-color:#FFF5DF;*/
height: 100%;
/*D1DAD5;*/
}
div#leftnav ul {
}
div#leftnav ul li {
font-size: .9em;
font-weight: bold;
border-right: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
}
.first {
border-top: 1px solid #000;
}
div#leftnav ul li a:link, div#leftnav ul li a:visited {
color: #fff;
background-color: #7584A1;
display: block;
width: 150px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;}
/*left nav styles end here*/
div#content {
width: 300px;
color: #000;
float: left:
}
div#content p {
margin-left: 10px;
line-height: 1.30em;
font-size: 1em;
text-indent: .9em;
margin-bottom: .50em;
}
/*This is for the about page*/
div#poem {
float: right;
width: 240px;
top: 10px;
}
div#poem h1 {
font-size: 1em;
text-align: center;
}
/*end coding for the about page poem*/
div#poem p{
font-size: .8em;
font-weight: bold;
text-indent: .8em;
color:#1D0A04;
line-height: 1.5em;
}
div#footer {
width: 804px;
background-color: }
div#h2 {
font-size: 1em;
text-align: center;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* \ */
* html .clearfix {height: 1%;display: block;}
/* */
__________
The about page is the only one that I started with 3 columns. I plan on adding a 3rd column to the other pages as well, but need to resolve this issue first.
The poem div is the 3rd div on this page.
Any help would be greatly appreciated.
