ОБНОВЛЕНИЕ2:
Говорили слишком рано.browsershots.org показывает, что он работает в Opera 5 (я использовал более раннюю версию) и некоторых выпусках Safari, и (конечно) IE7 и ниже (IE8 в порядке).
ОБНОВЛЕНИЕ:
Следующий код, бесстыдно подправленный из ответа Дана М., кажется, работает в современных браузерах.
<!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's room: "This is not urinal, it's 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's 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's room: "This is not urinal, it's 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's a town where they shoot entirely too many movies and not enough actors.
</p>
</div>
</div>
</body>
</html>
Старый ответ:
Это может быть невозможно только с помощью CSS.Рассмотрим эту страницу:
<!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's room: "This is not urinal, it's 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's a town where they shoot entirely too many movies and not enough actors.
</p>
</div>
</body>
</html>
Обратите внимание, что поплавок правильно обрабатывается рядом с боковой панелью и под ней (все ставки отключены в IE6).
Но левое поле неверно для текставыше боковой панели - без учета первого абзаца.
Этот первый абзац появляется перед боковой панелью в html-коде.Мало того, но это ударяет боковую панель вниз - она больше не в 250px.
Я почти уверен, что могу использовать javascript, чтобы обойти это - после загрузки страницы - но я НЕ рекомендуя такой подход.