CS4: IE7 Sidebar displays lower than maincontent

CS4: IE7 Sidebar displays lower than maincontent

Post by baskenburg » Thu, 11 Dec 2008 02:12:32


In IE7 my sidebar is being pushed down lower than my maincontent (but
correctly displayed in Firefox). I modified the twoColFixLtHdr page offered by
CS4 to create a page found here

I've tried workarounds (unsuccessfully) including:
-Making content div width smaller
-Applying overflow:hidden to content and header divs
-adjusting top & bottom margins and padding

I've validated the site (1 ampersand error persists) and checked the browser
compatability (no problems). The CSS and HTML is attached.

Any feedback would be greatly appreciated.

Thank you,

@charset "utf-8";
body {
text-align: center; /* this centers the container in IE 5* browsers. The text
is then set to the left aligned default in the #container selector */
color: #000000;
background-image: url(../nca-images/background.jpg);
margin: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0;
font-family: Arial, Helvetica, sans-serif;
.twoColFixLtHdr #container {
width: 780px;
text-align: left;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
margin-top: 0px;
padding-top: 1px;
background-color: #EDE3D7;
.twoColFixLtHdr #header {
width: 780px;
float: left;
margin-top: 0px;
margin-bottom: 0px;

.twoColFixLtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will
avoid margin collapse - an unexplainable space between divs. If the div has a
border around it, this is not necessary as that also avoids the margin collapse
padding: 10px 0; /* using padding instead of margin will allow you to keep
the element away from the edges of the div */
.twoColFixLtHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 200px;
padding-right: 5px;
padding-bottom: 15px;
padding-left: 5px;
background-color: #EDE3D7;
margin: 0px;
.twoColFixLtHdr #mainContent {
margin-top: 0px;
padding-top: 0;
margin-left: 210px;
clear: none;
margin-right: 5px;
.twoColFixLtHdr #footer {
padding-right: 10px;
padding-bottom: 0px;
padding-left: 20px;
background-color: #FFF;
border-right-width: 5px;
border-bottom-width: 5px;
border-left-width: 5px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #EDE3D7;
border-bottom-color: #EDE3D7;
border-left-color: #EDE3D7;
font-size: 10px;
text-align: center;
margin-top: 5px;
.twoColFixLtHdr #footer p {
padding-right: 0;
padding-left: 0;
padding-top: 25px;
.fltrt { /* this class can be used to float an element right in your page. The
floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and
should be the final element before the close of a container that should fully
contain a float */
font-size: 1px;
line-height: 0px;
#topNav1 {
float: left;
width: 130px;
background-color: #F4F4F4;
clear: right;
text-align: right;
margin-top: 0px;
#topNav2 {
float: right;
width: 115p