float jogged down in IE

main content float jogs down in IE

[snowman304]

I am new to floats but I think I have the jog error for IE. My mainContent float (which is right) is jogged down and starts after the nav float(which is left). Here is some code:

css

.twoColFixLtHdr #container { 
width: 780px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background-color: transparent;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
} 
.twoColFixLtHdr #header { 
background-color: transparent;
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
.twoColFixLtHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 63px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background-color: transparent;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 2px;
}
.twoColFixLtHdr #mainContent {
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 85px;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 0;
padding-left: 15px;
background-color: transparent;
background-image: url(images/wornparch.jpg);
background-repeat: repeat-y;
}
.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 */
 clear:both;
 height:0;
 font-size: 1px;
 line-height: 0px;
}

And here is some html:

<div id="container">
 <div id="header">
<?php
include_once("include/header.php");
?>
 </div>
 <div id="sidebar1">
<?php
include_once("include/nav.php");
?>
 </div>
 <div id="mainContent">
 <table width="664" border="0" cellpadding="0" cellspacing="0">
 <tr>
 <td colspan="3" class="header3" align="center">Member Account Page</td>
 </tr>
 <tr>
 <td colspan="3" class="fieldname" align="center"><?php echo $status;?></td>
 </tr>
 <tr>
 <td colspan="3" class="fieldname">&nbsp;</td>
 </tr>
 <tr>
 <td colspan="3" class="tableheader">&nbsp;<?php echo "Welcome Back ".$_SESSION['MNAME']." ";?></td>
</table>
</div>
 <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
 <br class="clearfloat" />
 <div id="footer" align="center">

Any ideas on how to fix this?

Thanks,
Mike

[Marshall]

Reverse the order of the two <div> in your html. Put the mainContent above the sidebar1, assuming you are floating the mainContent right.

Marshall

[snowman304]

Thanks for the suggestion. After trying what you said, the left div started at the bottom left after the maincontent div was finished.

I tryed making the maincontent a fix px width instead of using margin:

.twoColFixLtHdr #mainContent {
float: right; //I added this
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
width: 695px; //I added this
margin-left: 0px; //I changed this to 0
padding-top: 5px;
padding-right: 15px;
padding-bottom: 0;
padding-left: 15px;
background-color: transparent;
background-image: url(images/wornparch.jpg);
background-repeat: repeat-y;
}

That fixed the problem in IE, but the problem now appears in FF when using this new code change. So.....the old code works in FF great but causes a problem in IE. The new code fixes the problem in IE but causes the problem to appear in FF.

[snowman304]

I played around with it and got something I can manage with. I am left with a small space between the top of the mainContent div and where the text starts in that div, in IE. Not sure how to fix it 100%, but I can deal with that little space.

Here is the code I am using now:

.twoColFixLtHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 63px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background-color: transparent;
padding-top: 5px;
padding-right: 2px;
padding-bottom: 5px;
padding-left: 2px;
border: 1px solid #000000;
}
.twoColFixLtHdr #mainContent {
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 85px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 0;
padding-left: 5px;
background-color: transparent;
background-image: url(images/wornparch.jpg);
background-repeat: repeat-y;
}

[Marshall]

What doctype are you using?

Marshall

[snowman304]

I don't list any doctype in my code.