I am trying to make two divs float on opposite sides of the page, with text going between them. The top of the second (left-aligned) div should be flat with the bottom of the first (right-aligned) div. The code below works fine in FF, Chrome, Opera, etc., but they do not display correctly in IE. Both divs appear at the top of the text.
If I move the left-aligned div enough in the text, it works fine in IE, but this is not a very stable solution.
I found several pages on IE errors by IE, but I did not find anything that would speak directly to this.
CSS
div {
width: 200px;
margin-top: 10px;
border-style: solid;
border-width: 1px;
position: relative;
}
.wrapper {
width: 600px;
border-color: #FF0000;
}
.right {
float: right;
border-color: #00FF00;
}
.left {
float: left;
clear: both;
border-color: #0000FF;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="float.css" />
</head>
<body>
<div class="wrapper">
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla pretium tempor leo. Vivamus mi risus, dapibus ac,
consectetur quis, pellentesque eget, sem.
</div>
<div class="left">
Proin malesuada. Ut vel lorem. Cras rhoncus nisl accumsan
turpis tristique consequat. Sed lacinia ligula at nibh.
Morbi in quam. Morbi commodo nibh.
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla pretium tempor leo. Vivamus mi risus,
dapibus ac, consectetur quis, pellentesque eget, sem.
Maecenas est dui, imperdiet nec, fermentum ut,
pretium a, orci. Quisque hendrerit interdum orci.
Nulla sit amet risus non enim ultrices bibendum.
Aenean arcu purus, rhoncus at, vestibulum vel,
volutpat et, nunc. Integer eget risus eget purus viverra
congue.</p>
<p>Nullam vel libero ut purus semper ullamcorper.
Pellentesque mattis tincidunt odio. Nullam pulvinar
orci at dolor. Sed volutpat eros ac elit.
Praesent porttitor libero sed felis. Vivamus lobortis
pellentesque diam.
Proin laoreet massa ac metus. Integer faucibus lorem
molestie nibh. Integer id massa. Integer ligula ipsum,
pellentesque id, interdum at, pretium eget, orci.
Proin malesuada. Ut vel lorem.</p>
</div>
</body>
</html>