In Firefox my sidebar overlaps my footer, and IE6 it overlaps my footer and then some. Any help would be appreciated. I'm new to CSS, so excuse my poor code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>PHI</title>
<!-- styles suitable for any browser, any media -->
<style type="text/css" title="Site default">
body {
background-color: #fff5e1;
color: #000;
}
a:link {
color: #00c;
background-color: transparent;
}
a:visited {
color: #909;
background-color: transparent;
}
a:hover {
color: #513600;
background-color: transparent;
}
</style>
<!-- hide these rules from legacy browsers and mobile devices -->
<style type="text/css" title="Site default" media="all">
@media screen, projection {
/* exploit a parsing bug so @media rules are visible to MacIE5 */
.BeNiceToMacIE5 {
font-family: "\"}\"";
font-family: inherit;
}
body {
background-image:url(images/jdbg.png);
}
.wrapper {
margin:0 auto;
max-width:60em;
border: thin solid #000000;
overflow: hidden;
width:expression(document.body.clientWidth > 900? "900px" : "auto");
}
/*h1 {
background-color: #666666;
color: #7d5500;
margin: 0;
padding: .2em 2%;
}
h2 {
margin: .2em 0;
}*/
/* MAIN CONTENT */
.content h1 {
color: #663900;
padding-top: 15px;
margin-bottom: 10px;
font: bold 1.3em Georgia, "Times New Roman", Times, serif;
}
.content h2 {
font-size: 1em;
font-weight: normal;
border-bottom: 1px solid #106A9B;
margin-bottom: 5px;
color: #663900;
}
.content p {
font-size: .9em;
margin-bottom: 10px;
}
.content .figure {
float: right;
width: 178px;
margin-bottom: 2px;
margin-left: 5px;
position: relative;
}
.content .figure p {
position: absolute;
left: 10px;
bottom: 10px;
width: 168px;
background-color: #FFF;
border: 1px dashed #666666;
font-size: .5em;
font-weight: bold;
text-align: center;
padding: 5px;
margin: 0;
}
.content .figure img {
display: block;
}
.history{
width: 260px;
margin: 0 10px 10px 10px;
}
.history img{
border: 1px solid #666;
background-color: #FFF;
padding: 4px;
position: relative;
top: -5px;
left:-5px;
}
div.float {
float: left;
padding-right:0px;
padding-left:0px;
margin-left:25%;
margin-right:0px;
}
div.float1 {
float:right;
padding-right:0px;
padding-left:0px;
margin-left:0px;
margin-right:25%;
}
div.spacer {
clear: both;
}
* html #container{
width:100%;
}
* html .sidebar {height: 1%;}
.main {
clear: both;
width: 100%;
margin: 0;
padding: 0;
border-top: thin solid #000000;
border-bottom: thin solid #000000;
color: #000000;
background-color:#CCCCCC;
/* background-color value is for content background.
Image is 2000px wide, ~25% is colored, where sidebar should be
(exact pixel count of colored area is actually closer to 26%).
Position corresponds to left sidebar, repeat img vertically.
Easily modified for right sidebar - just flip the image,
change bg position to 75% and change .content to float:left.
*/
}
.content {
width:66%;
float: right;
margin-right: 75px;
display:inline;
}
/*Banner*/
#banner {
position: relative;
border: 1px solid #000000;
border-top: none;
border-left:none;
border-right:none;
background: url(images/RevolvePic1.png) no-repeat right top;
background-color: #CCCCCC;
}
/* fix IE 6: improperly positioning
'subscribe' and 'about us' links in banner */
* html #banner {
height: 1px;
}
#banner #logo {
margin-left:15px;
position: relative; /* jumping headerbar fix for IE */
}
#banner ul {
position: absolute;
right: 60px;
bottom: 5px;
}
/* NAV BAR */
#mainNav ul {
margin: 0;
padding: 0;
list-style: none;
background: url(images/bg_nav.png) repeat-x left top;
float: left;
width: 100%;
}
#mainNav li {
float: left;
padding: 0;
margin: 0;
}
#mainNav li a, #mainNav li a:link {
color: #FFFFFF;
text-decoration: none;
padding: .5em 1em;
border-right: 1px solid #000000;
display: block;
font: bold 12px "Lucida Grande", Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
}
#mainNav li a:hover {
background: url(images/bg_nav_h.png);
}
/* IE 6 hack to make entire button clickable */
* html #mainNav a { width: 1px; }
/* SIDE BAR*/
.sidebar {
float:left;
width:22%;
margin:0 2% 0 0;
border-right: 1px solid #000000;
padding-bottom: 32767px;
margin-bottom: -32767px;
background-color:#FFFFFF;
display:inline;
}
.sidebar h2 {
font-size: 1em;
margin-top:0px;
padding: 0px 8px 0 8px;
margin-bottom: 5px;
border-top: 3px solid #000000;
background: url(images/bg_side_head.png) repeat-x left bottom;
}
.sidebar p {
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
color: #666666;
font-size: .7em;
}
.sidebar h3 {
font-size: .7em;
margin-right: 5px;
margin-left: 5px;
color: #663900;
margin-bottom: 3px;
}
.sidebar h3 a {
color: #663900;
}
#sidebar a:hover {
color: #CA1D07;
}
.clear {
clear: both;
height: 1px;
overflow: hidden; /* prevent IE expanding the container */
margin: 0; /* keep flush with surrounding blocks */
}
.footer {
background-color: #FFFFFF; /* same bg color as h1 */
color: #000000;
margin: 0; /* flush with .main */
padding: 1% 2%;
}
} /* end media rules */
</style>
<!-- protect other browsers from IE6's quirks -->
<!--[if IE 6]><style type="text/css" title="Site default">
h1, .sidebar {position:relative}</style><![endif]-->
</head>
<body>
<div class="wrapper">
<div id="banner"><img src="images/header_bar.png" alt="Phi Kapp Chi Home" name="logo" width="524" height="119" id="logo"/></div>
<div id="mainNav">
<ul class="style1">
<li><a href="#">Home</a></li>
<li><a href="#">Alumni</a></li>
<li><a href="#">Rush</a></li>
<li><a href="#">Sing</a></li>
<li><a href="#">Float</a></li>
<li><a href="#">Intramurals</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<!-- end nav -->
<div class="main">
<div class="content">
<h1>Welcome to the Home of Phi Kappa Chi</h1>
<div class="figure">
<img src="images/crest edit.png" alt="Phi Chi Crest" width="178" height="250"align="right" /> </div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. p>
<h2>History of Phi Kappa Chi</h2>
<p> On December 18, 1987 , p>
<p>On Monday morning, p>
<div id="container">
<div class="spacer">
</div>
<div class="float">
<img src="images/BollingerHampton.gif" width="175" height="250"
alt="image 1" /><br />
</div>
<div class="float1">
<img src="images/BollingerHampton1.gif" width="175" height="250"
alt="image 3" /><br />
</div>
<div class="spacer">
</div>
</div>
<h2>Phi Kappa Chi Today</h2>
<p>Today, Phi p>
</div> <!-- end content -->
<div class="sidebar">
<h2 class="style1">Phi Chi News</h2>
<h3><a href="#"> Official Rush Starts Sunday, September 10th </a></h3>
<p>The official fall Rush starts this Sunday at the Baylor Science Building at 2 p.m. If you have any interest in Phi Chi, show up and meet some of the guys!</p>
<h3><a href="#"> Pictures Wanted </a></h3>
<p>Pictures have been updated to the website, but we need more!! If you have any pictures related to Phi Chi, please email them to the webmaster!</p>
<h3><a href="#"> Rush Schedule Announced </a></h3>
<p>The official Rush schedule has been announced. For more specifics, please check out the Rush page.</p>
<h3><a href="#"> Stoplight Party set for September 3rd </a></h3>
<p>Phi Chi will host its first party on Sunday, September 3rd at The Palladium (8th and Austin). The theme is Stoplight Party, where if you are single, where green; not sure, yellow; and dating someone, red. The party will start at 10:30 after the TCU game. Bring friends!</p>
<h3><a href="#"> Phi Chi has a New Website </a></h3>
<p> Phi Chi has a new website. Take some time and look around. Also, current members and alumni, please log into our new member database so you can keep up with past members. Please feel free to e-mail the webmaster any problems, questions, or suggestions.</p>
</div>
<!-- end sidebar -->
<!-- need a non-floating element to properly calculate container height -->
<div class="clear"></div>
</div> <!-- end main -->
<p class="footer">
</div> <!-- end wrapper -->
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>PHI</title>
<!-- styles suitable for any browser, any media -->
<style type="text/css" title="Site default">
body {
background-color: #fff5e1;
color: #000;
}
a:link {
color: #00c;
background-color: transparent;
}
a:visited {
color: #909;
background-color: transparent;
}
a:hover {
color: #513600;
background-color: transparent;
}
</style>
<!-- hide these rules from legacy browsers and mobile devices -->
<style type="text/css" title="Site default" media="all">
@media screen, projection {
/* exploit a parsing bug so @media rules are visible to MacIE5 */
.BeNiceToMacIE5 {
font-family: "\"}\"";
font-family: inherit;
}
body {
background-image:url(images/jdbg.png);
}
.wrapper {
margin:0 auto;
max-width:60em;
border: thin solid #000000;
overflow: hidden;
width:expression(document.body.clientWidth > 900? "900px" : "auto");
}
/*h1 {
background-color: #666666;
color: #7d5500;
margin: 0;
padding: .2em 2%;
}
h2 {
margin: .2em 0;
}*/
/* MAIN CONTENT */
.content h1 {
color: #663900;
padding-top: 15px;
margin-bottom: 10px;
font: bold 1.3em Georgia, "Times New Roman", Times, serif;
}
.content h2 {
font-size: 1em;
font-weight: normal;
border-bottom: 1px solid #106A9B;
margin-bottom: 5px;
color: #663900;
}
.content p {
font-size: .9em;
margin-bottom: 10px;
}
.content .figure {
float: right;
width: 178px;
margin-bottom: 2px;
margin-left: 5px;
position: relative;
}
.content .figure p {
position: absolute;
left: 10px;
bottom: 10px;
width: 168px;
background-color: #FFF;
border: 1px dashed #666666;
font-size: .5em;
font-weight: bold;
text-align: center;
padding: 5px;
margin: 0;
}
.content .figure img {
display: block;
}
.history{
width: 260px;
margin: 0 10px 10px 10px;
}
.history img{
border: 1px solid #666;
background-color: #FFF;
padding: 4px;
position: relative;
top: -5px;
left:-5px;
}
div.float {
float: left;
padding-right:0px;
padding-left:0px;
margin-left:25%;
margin-right:0px;
}
div.float1 {
float:right;
padding-right:0px;
padding-left:0px;
margin-left:0px;
margin-right:25%;
}
div.spacer {
clear: both;
}
* html #container{
width:100%;
}
* html .sidebar {height: 1%;}
.main {
clear: both;
width: 100%;
margin: 0;
padding: 0;
border-top: thin solid #000000;
border-bottom: thin solid #000000;
color: #000000;
background-color:#CCCCCC;
/* background-color value is for content background.
Image is 2000px wide, ~25% is colored, where sidebar should be
(exact pixel count of colored area is actually closer to 26%).
Position corresponds to left sidebar, repeat img vertically.
Easily modified for right sidebar - just flip the image,
change bg position to 75% and change .content to float:left.
*/
}
.content {
width:66%;
float: right;
margin-right: 75px;
display:inline;
}
/*Banner*/
#banner {
position: relative;
border: 1px solid #000000;
border-top: none;
border-left:none;
border-right:none;
background: url(images/RevolvePic1.png) no-repeat right top;
background-color: #CCCCCC;
}
/* fix IE 6: improperly positioning
'subscribe' and 'about us' links in banner */
* html #banner {
height: 1px;
}
#banner #logo {
margin-left:15px;
position: relative; /* jumping headerbar fix for IE */
}
#banner ul {
position: absolute;
right: 60px;
bottom: 5px;
}
/* NAV BAR */
#mainNav ul {
margin: 0;
padding: 0;
list-style: none;
background: url(images/bg_nav.png) repeat-x left top;
float: left;
width: 100%;
}
#mainNav li {
float: left;
padding: 0;
margin: 0;
}
#mainNav li a, #mainNav li a:link {
color: #FFFFFF;
text-decoration: none;
padding: .5em 1em;
border-right: 1px solid #000000;
display: block;
font: bold 12px "Lucida Grande", Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
}
#mainNav li a:hover {
background: url(images/bg_nav_h.png);
}
/* IE 6 hack to make entire button clickable */
* html #mainNav a { width: 1px; }
/* SIDE BAR*/
.sidebar {
float:left;
width:22%;
margin:0 2% 0 0;
border-right: 1px solid #000000;
padding-bottom: 32767px;
margin-bottom: -32767px;
background-color:#FFFFFF;
display:inline;
}
.sidebar h2 {
font-size: 1em;
margin-top:0px;
padding: 0px 8px 0 8px;
margin-bottom: 5px;
border-top: 3px solid #000000;
background: url(images/bg_side_head.png) repeat-x left bottom;
}
.sidebar p {
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
color: #666666;
font-size: .7em;
}
.sidebar h3 {
font-size: .7em;
margin-right: 5px;
margin-left: 5px;
color: #663900;
margin-bottom: 3px;
}
.sidebar h3 a {
color: #663900;
}
#sidebar a:hover {
color: #CA1D07;
}
.clear {
clear: both;
height: 1px;
overflow: hidden; /* prevent IE expanding the container */
margin: 0; /* keep flush with surrounding blocks */
}
.footer {
background-color: #FFFFFF; /* same bg color as h1 */
color: #000000;
margin: 0; /* flush with .main */
padding: 1% 2%;
}
} /* end media rules */
</style>
<!-- protect other browsers from IE6's quirks -->
<!--[if IE 6]><style type="text/css" title="Site default">
h1, .sidebar {position:relative}</style><![endif]-->
</head>
<body>
<div class="wrapper">
<div id="banner"><img src="images/header_bar.png" alt="Phi Kapp Chi Home" name="logo" width="524" height="119" id="logo"/></div>
<div id="mainNav">
<ul class="style1">
<li><a href="#">Home</a></li>
<li><a href="#">Alumni</a></li>
<li><a href="#">Rush</a></li>
<li><a href="#">Sing</a></li>
<li><a href="#">Float</a></li>
<li><a href="#">Intramurals</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<!-- end nav -->
<div class="main">
<div class="content">
<h1>Welcome to the Home of Phi Kappa Chi</h1>
<div class="figure">
<img src="images/crest edit.png" alt="Phi Chi Crest" width="178" height="250"align="right" /> </div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. p>
<h2>History of Phi Kappa Chi</h2>
<p> On December 18, 1987 , p>
<p>On Monday morning, p>
<div id="container">
<div class="spacer">
</div>
<div class="float">
<img src="images/BollingerHampton.gif" width="175" height="250"
alt="image 1" /><br />
</div>
<div class="float1">
<img src="images/BollingerHampton1.gif" width="175" height="250"
alt="image 3" /><br />
</div>
<div class="spacer">
</div>
</div>
<h2>Phi Kappa Chi Today</h2>
<p>Today, Phi p>
</div> <!-- end content -->
<div class="sidebar">
<h2 class="style1">Phi Chi News</h2>
<h3><a href="#"> Official Rush Starts Sunday, September 10th </a></h3>
<p>The official fall Rush starts this Sunday at the Baylor Science Building at 2 p.m. If you have any interest in Phi Chi, show up and meet some of the guys!</p>
<h3><a href="#"> Pictures Wanted </a></h3>
<p>Pictures have been updated to the website, but we need more!! If you have any pictures related to Phi Chi, please email them to the webmaster!</p>
<h3><a href="#"> Rush Schedule Announced </a></h3>
<p>The official Rush schedule has been announced. For more specifics, please check out the Rush page.</p>
<h3><a href="#"> Stoplight Party set for September 3rd </a></h3>
<p>Phi Chi will host its first party on Sunday, September 3rd at The Palladium (8th and Austin). The theme is Stoplight Party, where if you are single, where green; not sure, yellow; and dating someone, red. The party will start at 10:30 after the TCU game. Bring friends!</p>
<h3><a href="#"> Phi Chi has a New Website </a></h3>
<p> Phi Chi has a new website. Take some time and look around. Also, current members and alumni, please log into our new member database so you can keep up with past members. Please feel free to e-mail the webmaster any problems, questions, or suggestions.</p>
</div>
<!-- end sidebar -->
<!-- need a non-floating element to properly calculate container height -->
<div class="clear"></div>
</div> <!-- end main -->
<p class="footer">
</div> <!-- end wrapper -->
</body>
</html>