Problem with flow / word wrap in IE

I'm working on a website for my father, but I am running into a problem and cannot find the cause. The problem is that the text in the left column (in the 'content' DIV ) doesn't wrap under the image (in the 'foto' DIV ) at the top right if the text gets too long. I've looked for days, but I can't put my finger on what exactly causes this behaviour!

Also, I've made it so that the footer is always at the bottom with background: fixed, but I understand this might not work in previous versions of IE? How could this be fixed?

Code follows. All url's should've been stripped, according to forum rules.

Html file:


<?xml version="1.0" encoding="UTF-8"?>
<!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">
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
<title>Test</title>
</head>
<body>


<div id="header">
<div id="logo">
<img src="" width="280" height="80" alt="" /></div>


<div id="navcontainer">
<ul>
<li><a href="#">Menuitem 1</a></li>
<li><a href="#">Menuitem 2</a></li>
<li><a href="#">Menuitem 3</a></li>
<li><a href="#">Menuitem 4</a></li>
<li><a href="#">Menuitem 5</a></li>
</ul>
</div>


<div id="headerrand">
&nbsp;</div>
</div>


<div id="stage">
<div id="foto">
<img src="image.jpg" width="400" height="300" alt="test" /></div>


<div id="content">
<h1>The title of the page</h1>
<p>Introduction</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam aliquet urna non purus. Aliquam facilisis pulvinar pede. Aliquam ut pede. Pellentesque accumsan ante. Phasellus vehicula elementum mi. Praesent suscipit, felis id iaculis posuere, nisi risus sodales eros, sed imperdiet nibh metus et augue. Vivamus ligula orci, dictum adipiscing, pharetra sit amet, vulputate at, ante. Cras velit magna, congue quis, ultricies vel, vulputate et, neque. Vestibulum eleifend, tellus in posuere laoreet, elit purus ultrices enim, eu egestas felis sem quis libero. Suspendisse venenatis est quis augue varius rutrum. Praesent felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus id metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</p>
<p>Ut rhoncus, tortor quis ornare cursus, magna mi facilisis enim, non dapibus nunc pede vel ante. Phasellus adipiscing. Aenean enim ligula, ultrices porta, faucibus vel, ultricies a, tortor. Integer tempus dui pretium ante. Integer vulputate. Proin nonummy. In hac habitasse platea dictumst. Curabitur purus neque, ultricies sed, pulvinar malesuada, convallis quis, lectus. Duis malesuada sapien hendrerit lacus. In sit amet arcu nec diam feugiat dapibus. Pellentesque id ipsum. Sed dictum velit luctus elit. Cras varius velit ut ipsum. Curabitur elementum mi in purus. Etiam felis erat, convallis id, consequat vitae, porta a, lacus. Vivamus egestas. Proin rhoncus. Nam vitae felis et odio porta scelerisque.</p>


<p>&nbsp;</p>
<h2>Subheader</h2>
<p>Some random text</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</div>


<div id="footer">
<div id="footercontent">
<strong>Sitemap - Copyright - Other</strong></div>
</div>
</body>
</html>

CSS file (styles.css):


body {
margin: 0px;
padding: 0px;
font-family: tahoma, verdana, geneva, arial, helvetica, sans-serif;
font-size: 1em;
background: #ffffcc; 
}


blockquote {
font-size: .9em;
font-weight: bold;
}


ul {
font-size: 0.75em
}


ul li {
list-style-type: square;
margin-bottom: 4px;
}


#header {
margin: 0px 0px 0px 0px;
padding: 0px;
background-color:#426208;
}


#header #logo {
margin: 0px 15px 0px 0px;
padding: 0px;
float: right;
color: white;
font-size: 18px;
}


/*
#header #menu {
margin: 41px 0px 0px 20px;
padding: 0px;
float: left;
}


#header #menu ul { 
margin: 0px;
padding: 0px;
list-style: none;
}


#header #menu ul li { 
display: inline;
}


#header #menu ul li a { 
text-decoration: none;
color: #fff;
font-weight: bold;
padding-right: 8px;
padding-left: 4px;
border-right: 1px solid #fff;
} 
*/


/* Menu styles */
#navcontainer
{
background-color: #426208;
margin: 61px 0px 0px 0px;
padding: 0px;
position: absolute;
left: 0px;
top: 0px;
}


#navcontainer ul li { display: inline; }
#navcontainer ul
{
margin: 0;
padding: 0 0 0 30px;
color: #FFFFFF;
font-family: tahoma, verdana, geneva, arial, helvetica, sans-serif;
font-size: .75em;
letter-spacing: 2px;
font-weight: bold;
}


#navcontainer ul li a
{
padding: 0.2em 12px;
background-color: #426208;
color: #FFFFFF;
text-decoration: none;
float: left;
border-right: 1px solid #94B473;
}


#navcontainer ul li a:hover
{
background-color: #7B9D25;
color: #FFFFFF;
}


#navlist li a:hover, #navlist li a:active
{
color: #FFFFFF;
text-decoration: none;
background: #CC3333;
text-align: left;
}


#header #headerrand {
padding-top: 61px;
border-bottom: 5px solid #ffcc33;
}


#stage {
margin: 0px;
padding: 0px;
height: 400px;
background-color: #ffffcc;
}


#stage #foto {
float: right;
margin: 0px;
padding: 0px;
background-color: #ffffcc;
background-color: #ffffcc;
}


#stage #foto img { 
margin: 10px 20px 10px 8px;
border: 4px solid #426208; 
padding: 2px;
}


#stage #content {
margin: 0px 0px 10px 40px;
/* padding: 10px 50px 10px 0px; */
height: 400px;
background-color: #ffffcc;
padding: 0px 50px 50px 20px;
}


/* Stage styles */
#stage h1 { 
margin:0px 0px 0px 0px;
padding: 4px 4px 4px 4px;
font-weight: bold;
font-size:18px;
color:#426208;
}


#stage h2 { 
font-size:0.9em;
font-weight:900;
color: #426208;
margin: 0px 0px 0px 0px;
padding: 10px 0px 0px 4px; 
}


#stage p {
font-size: 0.8em;
padding: 0px 0px 0px 4px;
margin: 0;
padding: 0px 0px 0px 4px;
}


#stage p a:hover { 
text-decoration: none;
}


#footer {
color: white;
background: #000;
position: fixed;
 bottom: 0px;
width: 100%;
}

Problem with flow / word wrap in IE

Text doesn't wrap under image in IE

Darkelve

evo81

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week