ansaurus

Question

Fix a box 250px from top of content with wrapping content

Answer 1

+2 A:

UPDATE2:

Spoke too soon. browsershots.org shows that it barfs on Opera 5 (I used an earlier version) and some editions of Safari, and (of course) IE7 and below (IE8 is OK).

UPDATE:

The following code, shamelessly tweaked 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"&gt;
<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>

Old Answer:

This may not be possible with just CSS. Consider this page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"&gt;
<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>

Notice that the float handles correctly next to the sidebar and below it (All bets are off in IE6).

But the left margin is wrong for the text above the sidebar -- not counting the first paragraph.

That first paragraph appears before the sidebar in the html code. Not only that, but it bumps the sidebar down -- it's no longer at 250px.

I'm pretty sure I can use javascript to fudge around this -- after the page is loaded -- but I'm NOT recommending that approach.

Brock Adams 2010-06-09 20:50:50

Thanks. Definitely want to stay away from JavaScript.

Matt 2010-06-09 21:23:08

ooh — that looks great! Collaboration win!

Dan M 2010-06-10 00:30:39

Answer 2

+2 A:

Dan M 2010-06-09 21:03:01

Thanks! Great attempt.

Matt 2010-06-09 21:21:23

How does this fail in Chrome and IE? It seems to work fine for me, aside from the usual minor spacing issues.

Brock Adams 2010-06-09 21:24:49

This works in IE8, but not in compatibility mode. Doesn't work in Chrome for me either: http://www.focusontheclouds.com/files/example2.html.

Matt 2010-06-09 21:52:32

Weird. How does my example look to you? http://scratchpad2.com/public/NiceSidebarBox2.htm

Brock Adams 2010-06-09 22:15:00

Broken - in Chrome 5.037 - http://www.focusontheclouds.com/files/nice-sidebar-chrome5.gif.

Matt 2010-06-10 00:19:31

Re: "Broken - in Chrome 5.037" ... Well, pooh. It works on my Chrome -- but it's only version 2! Guess it's time for an update (I only use Chrome for gross-breakage checks).

Brock Adams 2010-06-10 03:46:47

ansaurus

tags:

views:

answers:

Fix a box 250px from top of content with wrapping content

UPDATE2:

UPDATE:

Old Answer:

related questions