Image Placement Goes Outside of div

Works in Firefox not IE

[graywolf]

I'm playing around with some css layouts and just cant get this on peoblem licked. Thought someone with a little more experience might be able to nudge me in the right direction.

Here is the css

body{
background:#0000ff;
font-family:arial;
size:small;

}
#hdr{
position:absolute;
top:0;
height:148px;
width:100%;
color: #ffffff;
margin:0;
text-align:center;

}
#ftr {
position:relative;
text-align:center;
width:100%;
padding-top:20px;
padding-bottom:20px;
border:1px solid #000000;
background:#eeeeee;
color: #333333;
margin-top:200px;
margin-bottom:200px;
font-size:x-small;
}
#maincontent{
background:#ffffff;
color:#000000;
position:relative;
margin: 150px 215px 0px 205px;
padding:15px;
border:1px solid #000000;
z-index:1;

}
#navsect1{
background:red;
position:absolute;
top:150px;
left:0px;
width:190px;
color:#ffffff;
border:0px solid #000000;
padding:10px;
z-index:2;

}
#navsect2{
background:green;
position:absolute;
top:0;
right:0;
margin: 150px 0 0 0;
width:200px;
color:#ffffff;
border:0px solid #000000;
padding:10px;
z-index:2;

}

Here is the main body

<div id="fullbody">
<div id="maincontent">
<img src="http://showcase.netins.net/web/phdss/WebmasterWorldgfx/dlogo.png" align="left">
This si the main body<br>
Lorem ipsum dolor sic almet
</div>
<div id="navsect1">
This is the left panel
</div>
<div id="navsect2">
This is the right panel
</div>
</div>
<div id="hdr">
this is the header
</div>
<div id="ftr">
this is the footer
</div>

The problem happens when I add align='left' or align='right' into the image tag. It looses it's place in IE. Any suggestions? Thanks in advance.

[createErrorMsg]

graywolf, I believe this has to do with how the "align" attribute is handled by IE. Unless I'm mistaken, IE treats "align" as if it were "float." Which means that when you "align" an element, you're actually floating it, with all the finikiness (sp?) that floating entails.

I confirmed this by adding a float:left; to the #maincontent style declaration. This caused the #maincontent div to expand and contain the image. Classic float behavior. Also, if you replace "align='left' " with "style='float:left;' ", you get the same behavior.

Unfortunately, this also causes everything but #maincontent and the footer to disappear from the page! (In FF, it causes #maincontent to disappear...odd.) I have not been able to work out why this is happening, but at least you know why IE displays the image outside of the box.

Sorry I couldn't be of more help.

cEM

[graywolf]

I found a hack that seemed to work but not sure why

Add this to the css
#fleft {
position:relative;
float: left;
margin: 0;

}
#fright {
position:relative;
float: right;
margin: 0;

}

display the images like this

<div id="fleft"><img src="http://showcase.netins.net/web/phdss/WebmasterWorldgfx/dlogo.png"></div>

or
<div id="fright"><img src="http://showcase.netins.net/web/phdss/WebmasterWorldgfx/dlogo.png"></div>