Forum Moderators: not2easy
I know that IE plays by its own rules when it comes to these types of layouts; but i'm not knowledgeable enough to figure out how to fix that problem. FWIW, I do know that in IE 6 this problem does not occur. And in IE 5.2 Mac, the div remains the proper width, yet still drops down below the "index_photo" div.
My doctype is set to XHTML 1.0 Transitional
Here is the snippet of code in which the problem is occurring:
<div id="index_photo"><img src="images/girl_sunset.jpg" alt="Girl relaxing, watching the sunset" width="319" height="225" /></div>
<div id="index_text">
<div id="index_header">Headline Line 1. <br />
Headline Line 2.<br />
<a href="forms/forms_index.html"><img src="images/get_started.gif" alt="Get Started Now" width="148" height="45" id="Image1" /></a></div>
<div id="index_sub">
<h4>Welcome to Company Name. </h4>
Company description.
<p><br />
</p>
</div>
</div>
And the relevant CSS:
#index_photo {
float: left;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0px;
width: 319px;
}
#index_text {
float: right;
width: 475px;
text-align: left;
background-color: #FFFFFF;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0px;
min-height: 1px;
}
#index_header {
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: lighter;
color: #265380;
background-color: #BCCEDD;
height: 110px;
line-height: 30px;
margin: 0px;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 30px;
width: 445px;
}
#index_sub {
color: #333333;
font-size: 12px;
line-height: 18px;
background-color: #FFFFFF;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 30px;
margin-top: 5px;
height: 65px;
width: 435px;
}
The above divs are enclosed in the following div "main"
#main {
font-size: 12px;
line-height: 20px;
color: #333333;
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
text-align: left;
padding: 0px;
top: 0px;
overflow: auto;
clear: both;
margin: 0px;
width: 800px;
}
...which is enclosed in the following div "container"
#container {
text-align: center;
width: 800px;
min-height: 100%;
height: auto;
position: relative;
background-color: #FFFFFF;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
I appreciate any feedback or suggestions on the code. Thank you!
sorry I'm not seeing a float drop in IE7 or IE6 for that matter, using the code you provided - I even wrapped the whole lot in a div (794px wide) as that is the minimum width need to contain this:
so is your wrapper/layout wide enough to contain this?
what is your actual Doctype?
is there anything inside the #index-header div (like an image) which might be forcing it wider than specified?
try making all images inside floats
display: block;aside from all that I can't think of what else to try as I can't even make it break :)
-Suzy
Thanks for the response. Here is my doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
I just checked the site again and i'm still getting the same problem. It looks like there's about 10 pixels of overlap on the #index_header div. It's only a problem in IE7. I'll try your suggestion and see if that clears it up.
Thanks again!
