UPDATE2:
He spoke too early. browsershots.org shows that these are barfs on Opera 5 (I used an earlier version) and some releases of Safari and (of course) IE7 and lower (IE8 is fine).
UPDATE:
The following code, shamelessly tuned from Dan M's answer, seems to work in modern browsers.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Nice Sidebar Box</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.wrapper
{
width: 500px;
margin: 0 30px;
line-height: 1.5;
padding-top: 250px;
}
.content
{
margin: 0;
margin-top: -250px;
}
.relatedLinks
{
height: 300px;
width: 240px;
margin: 0 1em;
background-color: red;
float: left;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="relatedLinks">
Related links content here...
</div>
<div class="content">
<p>
Do not argue with a spouse who is packing your parachute.
</p>
<p>
Three weeks ago, she learned how to drive. Last week she learned how to aim it.
</p>
<p>
How, if they can't see their reflections, do vampires always get their hair so nice?
</p>
<p>
My wife will buy anything marked down. Last year she bought an escalator.
</p>
<p>
Sign in a men room: "This is not urinal, it ourinal, so please flush."
</p>
<p>
She was at the beauty shop for two hours. That was only for the estimate.
</p>
<p>
For those of you who've never been to Las Vegas, there the "G string" is known as the gownless
evening strap.
</p>
<p>
Hollywood a town where they shoot entirely too many movies and not enough actors.
</p>
<p>
Three weeks ago, she learned how to drive. Last week she learned how to aim it.
</p>
<p>
How, if they can't see their reflections, do vampires always get their hair so nice?
</p>
<p>
My wife will buy anything marked down. Last year she bought an escalator.
</p>
<p>
Sign in a men room: "This is not urinal, it ourinal, so please flush."
</p>
<p>
She was at the beauty shop for two hours. That was only for the estimate.
</p>
<p>
For those of you who've never been to Las Vegas, there the "G string" is known as the gownless
evening strap.
</p>
<p>
Hollywood a town where they shoot entirely too many movies and not enough actors.
</p>
</div>
</div>
</body>
</html>
Old answer:
This may not be possible with CSS only. Consider this page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Nice Sidebar Box</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.content
{
width: 500px;
margin: 2em;
line-height: 1.5;
}
.relatedLinks
{
position: relative;
top: 250px;
height: 300px;
width: 240px;
margin: 1em;
background-color: red;
float: left;
margin-bottom: 250px;
display: inline-block;
}
</style>
</head>
<body>
<div class="content">
<p>
Do not argue with a spouse who is packing your parachute.
</p>
<div class="relatedLinks">
Related links content here...
</div>
<p>
Three weeks ago, she learned how to drive. Last week she learned how to aim it.
</p>
<p>
How, if they can't see their reflections, do vampires always get their hair so nice?
</p>
<p>
My wife will buy anything marked down. Last year she bought an escalator.
</p>
<p>
Sign in a men room: "This is not urinal, it ourinal, so please flush."
</p>
<p>
She was at the beauty shop for two hours. That was only for the estimate.
</p>
<p>
For those of you who've never been to Las Vegas, there the "G string" is known as the gownless
evening strap.
</p>
<p>
Hollywood a town where they shoot entirely too many movies and not enough actors.
</p>
</div>
</body>
</html>
Please note that float is correctly processed next to and below the sidebar (all bets are disabled in IE6).
- .
html-. , - 250 .
, javascript , - , , .