IE div fix

[jerseydubs]

i am confused. on the page at the url below, the text [div]'s should be confined to a finite space. when viewed in opera for mac or firefox for mac they appear properly. when viewed in ie/win and ie/mac they do not appear correctly. in ie/win they are spaced properly but move with browser window resize. in ie/mac everything is piled on top of each other. can anyone help?

http://www.afih.net/bio_np.html


here is the css:



body
{
background: url('WebGIFs/caduceus2.gif') no-repeat fixed 400px 150px;
font-family: Arial;
color: #000;
margin: 0;
padding: 15px;
width: 800px;
}

div.images
{
float: left;
display: inline;
position: fixed;
width: 300px;
}

div.text
{
float: right;
display: inline;
width: 500px;
}

h1
{
margin: 0;
float: right;
width: 500px;
font: 300% Times;
}

h2
{
margin: 0 0 25px 0;
width: 500px;
font: italic 150% Times;
color: #933;
}

img.header
{
vertical-align: middle;
}

img.left
{
display: block;
margin: 15px 10px 50px 45px;
}

p.sub
{
float: right;
font-size: 125%;
color: #933;
}

p.bio
{
color: #933;
}

a.button
{
float: right;
color: #000;
background-color: #999;
text-decoration: none;
text-align: center;
padding: 2px 15px 2px 15px;
border-top: 2px solid #ccc;
border-right: 2px solid #666;
border-bottom: 2px solid #666;
border-left: 2px solid #ccc;
}

a.button:hover
{
color: #fff;
background-color: #999;
text-decoration: none;
text-align: center;
padding: 2px 15px 2px 15px;
border-top: 2px solid #ccc;
border-right: 2px solid #666;
border-bottom: 2px solid #666;
border-left: 2px solid #ccc;
}

a.button:active
{
color: #fff;
background-color: #999;
text-decoration: none;
text-align: center;
padding: 2px 15px 2px 15px;
border-top: 2px solid #666;
border-right: 2px solid #ccc;
border-bottom: 2px solid #ccc;
border-left: 2px solid #666;
}

[drhowarddrfine]

IE does not get the width correctly even if they add up to your 800px. You need to make the containing div slightly wider or the divs smaller.

Also, make sure you get a doctype so IE isn't in 'quirks' mode.

[tgrk35]

You might try making the text div have a float: left; instead of float: right;

[ShrineDesigns]

your css lightenedbody {
margin: 0%;
padding: 15px;
width: 800px;
background: fixed #FFF url('WebGIFs/caduceus2.gif') 400px 150px no-repeat;
color: #000;
font-family: Arial;
}
div.images {
display: inline;
float: left;
position: fixed;
width: 300px;
}
div.text {
display: inline;
float: right;
width: 500px;
}
h1 {
float: right;
margin: 0%;
width: 500px;
font: 300% Times;
}
h2 {
margin: 0% 0% 25px 0%;
width: 500px;
font: italic 150% Times;
color: #933;
}
img.header {
vertical-align: middle;
}
img.left {
display: block;
margin: 15px 10px 50px 45px;
}
p.sub {
float: right;
font-size: 125%;
color: #933;
}
p.bio {
color: #933;
}
a.button {
float: right;
padding: 2px 15px;
border: 2px solid #666;
border-top-color: #CCC;
border-left-color: #CCC;
text-decoration: none;
text-align: center;
background-color: #999;
color: #000;
}
a.button:hover,
a.button:active {
background-color: #999;
color: #fff;
}