My right column content is created dynamically by an application so it
will vary in height. When the main content of the page takes up more
vertical space than the rigth column, I want the content to flow under
the right column (much like adding a picture and floating it right).
The problem is that the only way I can figure out how to make that
happen is to output the right column HTML before the main content.
This takes the right column out of the normal page flow, meaning that
if you removed all CSS, the page structure would be out of whack
because the right column would appear before the main body content...or
if a screen reader were reading the page, it would be off.
Is there a way with CSS to output the right column content after the
main body content so the page flow is correct? Page sample below.
John
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitl ed Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style type="text/css">
..mainbody {width:600px; border:1px solid #000;}
..rightcol { float:right; width:150px; margin:5px; border: 2px solid
#ff0000;}
</style>
</head>
<body>
<div class="mainbody ">
<div class="rightcol ">
<div class="rightcol box">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</div>
<p>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 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</p>
</div>
</body>
</html>I
