Home/ Questions/Q 839487
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T05:28:15+00:00

I’m having trouble left aligning a related links div inside a block of text,

  • 0

I’m having trouble left aligning a related links div inside a block of text, exactly 250 pixels from the top of a content area, while retaining word wrapping. I attempted to do this with absolute positioning, but the text in the content area doesn’t wrap around the content.

I would just fix the related links div in the content, however, this will display on an article page, so I would like for it to be done without placing it in a specific location in the content.

Is this possible? If so, can someone help me out with the CSS for this?

Example image of desired look & feel…

UPDATE: For simplicity, I’ve added example code. You can view this here: http://www.focusontheclouds.com/files/example.html.

Example HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
  <title>Example Page</title> 
  <style>
    body {
      width: 400px; 
      font-family: Arial, sans-serif;
    }
    h1 {
      font-family: Georgia, serif; 
      font-weight: normal;
    }
    .relatedLinks {
      position: relative;
      width: 150px; 
      text-align: center; 
      background: #f00; 
      height: 300px; 
      float: left; 
      margin: 0 10px 10px 0;
    }
  </style> 
</head>
<body> 
  <div class="relatedLinks"><h1>Related Links</h1></div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus est luctus ante auctor et ullamcorper metus ullamcorper. Vestibulum molestie, lectus sed luctus egestas, dolor ipsum aliquet orci, ac bibendum quam elit blandit nulla.</p>
  <p>In sit amet sagittis urna. In fermentum enim et lectus consequat a congue elit porta. Pellentesque nisl quam, elementum vitae elementum et, facilisis quis velit. Nam odio neque, viverra in consectetur at, mollis eu mi. Etiam tempor odio vitae ligula ultrices mollis. </p>
  <p>Donec eget ligula id augue pulvinar lobortis. Mauris tincidunt suscipit felis, eget eleifend lectus molestie in. Donec et massa arcu. Aenean eleifend nulla at odio adipiscing quis interdum arcu dictum. Fusce tellus dolor, tempor ut blandit a, dapibus ac ante. Nulla eget ligula at turpis consequat accumsan egestas nec purus. Nullam sit amet turpis ac lacus tincidunt hendrerit. Nulla iaculis mauris sed enim ornare molestie. </p>
  <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas non purus diam. Suspendisse iaculis tincidunt tempor. Suspendisse ut pretium lectus. Maecenas id est dui.</p>
  <p>Nunc pretium ipsum id libero rhoncus varius. Duis imperdiet elit ut turpis porta pharetra. Nulla vel dui vitae ipsum sollicitudin varius. Duis sagittis elit felis, quis interdum odio. </p>
  <p>Morbi imperdiet volutpat sodales. Aenean non euismod est. Cras ultricies felis non tortor congue ultrices. Proin quis enim arcu. Cras mattis sagittis erat, elementum bibendum ipsum imperdiet eu. Morbi fringilla ullamcorper elementum. Vestibulum semper dui non elit luctus quis accumsan ante scelerisque.</p>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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">
<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">
<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.

    • 0