Forum Moderators: not2easy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" href="styles.css" type="text/css" />
<style type="text/css">
.left_pic {
float: left;
}
.right_pic {
float: right;
}
.left_text {
float: left;
width: 350px;
border: 1px #000000 dashed;
padding: 10px;
margin-top: 35px;
}
.right_text {
float: right;
width: 350px;
border: 1px #000000 dashed;
padding: 10px;
margin-top: 35px;
}
.function {
width: 675px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
border: 1px #000000 dashed;
}
</style>
</head>
<body>
<tr>
<td class="page">
<img src="images/headers/functions_page.gif" alt="Functions" width="282px" height="98px" /><br />
[b]<div class="function">
<img class="left_pic" src="images/functions/wedding_anniversary.gif" alt="Weddings and Anniversaries" width="273px" height="141px" />
<div class="right_text">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </div>
</div>
<div class="function">
<img class="right_pic" src="images/functions/birthday.gif" />
<div class="left_text">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </div>
</div>
<div class="function">
<img class="left_pic" src="images/functions/wedding_anniversary.gif" alt="Weddings and Anniversaries" width="273px" height="141px" />
<div class="right_text">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </div>[/b]
</div>
</td>
</tr>
</body>
</html>
Aside of that I think you fell in the trap of developing in IE: it's got a badly broken box model. Your div with a class of "function" contains nothing but floated elements and those are supposed to be taken out of the flow and that means your "function" divs have no height.
The code does validate
<img class="right_pic" src="images/functions/birthday.gif" />
Valid html is something that's not so easy to achieve, esp not against a strict DTD.
Regardless, glad you found a solution.
typically verge to using an element in the flow (hence not floated itself) that's got a clear on it.Can you give me an example of how this should be done?
Something like:
<div class="tobestretched">
<img class="tobefloated" ... />
...
<img class="tobefloated" ... />
<br class="clear" />
</div>
And in CSS:
img.tobefloated {
width:10px;
height:10px;
float:left;
...
}
.clear {
clear:both;
}
You can use other elements than a <br> to add the clear on, that's up to you and what makes semantical sense in the html.
