Floating / wrapping around an absolutely positioned element?

Question

I have a content box ( #left-home-content ), with a series of paragraphs, and at the end, a link in a <span> ( .read-more-link ), and then a <div> ( #left-home-spread ) that I want positioned absolutely from the bottom of the box. That's easy enough. The trick is that I want the have the paragraphs wrap around this <div> . Code is below, CSS first:

/* @group Left upper home content */

#left-home-content-container {
    background-image: url(/dev/images/bg-primary-content.png);
    height: 273px;
    padding-top: 30px;
    margin-top: -15px;
    margin-left: 31px;
    position: relative;
    float: left;
}

#left-home-content {
    width: 590px;
    height: 240px;
}

#left-home-content h3 {
    font: normal 20px/1.2 AvenirLTStd65Medium, "Helvetica Neue", HelveticaNeue, Helvetica-Neue, Helvetica, Arial, Verdana, sans-serif;
    color: #e2876a;
    margin-bottom: 6px;
    font-size-adjust: 0.47;
}

#left-home-content p {
    line-height: 1.6;
    margin-bottom: .6em;
}

.read-more-link {
    display: block;
    font-family: AvenirLTStd65Medium, "Helvetica Neue", HelveticaNeue, Helvetica-Neue, Helvetica, Arial, Verdana, sans-serif;
    font-size-adjust: 0.47;
    font-weight: normal;
    font-style: normal;
    margin-top: 12px;
}

#left-home-content .read-more-link {
    margin-top: 12px;
}

#left-home-spread {
    position: absolute;
    bottom: 34px;
    right: 34px;
}

/* @group Spread the word */

.spread-the-word {
    background: url(/dev/images/bg-spread.png) no-repeat;
    width: 260px;
    height: 31px;
    padding-top: 17px;
    padding-left: 15px;
       -moz-border-radius: 10px; /* FF1+ */
    -webkit-border-radius: 10px; /* Saf3-4 */
            border-radius: 10px; /* Opera 10.5, IE 9, Saf5, Chrome */
            box-shadow: 0 0 5px rgba(86,86,86,0.25);
       -moz-box-shadow: 0 0 5px rgba(86,86,86,0.25);
    -webkit-box-shadow: 0 0 5px rgba(86,86,86,0.25);
}

.spread-the-word ul {
    float: left;
    margin: -7px 0 0 8px;
    width: 115px;
}

.spread-the-word li {
    float: left;
    list-style: none;
    width: 28px;
    height: 28px;
    margin: 0 12px 0 0;
}

.spread-the-word .last-item {
    margin-right: 0;
}

#left-home-content .spread-the-word h3 {
    color: white;
    font-size: 16px;
    float: left;
    font-size-adjust: 0.47;
    width: 129px; /* Specified to correct for MobileSafari oddness re: SVG fonts*/
    text-shadow: #627C39 0 0 10px;
    text-shadow: rgba(98,124,57,0.5) 0 0 10px;
}

#left-home-content .addthis_32x32_style .at300bs,
#left-home-content .addthis_32x32_style .at15t {
    background: url(/dev/images/spread-the-word/spread-the-word-icons.png) no-repeat left;
    overflow: hidden;
    display: block;
    background-position: 0 0;
    height: 28px;
    width: 28px;
    line-height: 28px!important;
}

#left-home-content .at300bs:hover {
    opacity: 1;
            box-shadow: 0 0 15px #fff;
       -moz-box-shadow: 0 0 15px #fff;
    -webkit-box-shadow: 0 0 15px #fff;
}

#left-home-content .addthis_default_style .at300b,.addthis_default_style .at300m { padding: 0; }

#left-home-content .addthis_32x32_style .at15t_compact { background-position: 0 0; width: 28px; height: 28px; margin-right: 0; }
#left-home-content .addthis_32x32_style .at15t_facebook { background-position: 0 -78px; width: 28px; height: 28px; }
#left-home-content .addthis_32x32_style .at15t_linkedin { background-position: 0 -156px; width: 28px; height: 28px; }

/* @end */

/* @end */

And the HTML to go with it.

<section id="left-home-content-container" class="left-col">
    <div id="left-home-content">
        <h3><a href="#">Now Let&rsquo;s Make a Difference</a></h3>
        <div class="spread-the-word" id="left-home-spread">
            <h3>Spread the Word</h3>
            <ul class="addthis_toolbox addthis_32x32_style addthis_default_style">
                <li><a class="addthis_button_linkedin"></a></li>
                <li><a class="addthis_button_facebook"></a></li>
                <li class="last-item"><a class="addthis_button_compact"></a></li>
            </ul>
        </div>

        <p>Donec non sapien quis sapien vehicula pellentesque sed eu lacus. In at eros nec mi imperdiet tempor at non dolor. Morbi porta pretium sollicitudin. Proin blandit consequat turpis at pulvinar. Aliquam eros lectus, dictum sed consequat a, congue sed leo. In in eros at lacus laoreet feugiat. Ut pellentesque dolor eget sem vulputate bibendum. Ut pellentesque dolor eget sem vulputate biben dum biben.</p>

        <p>Nulla vehicula lobortis ullamcorper. Aliquam pellentesque, nulla non condimentum vulputate.</p>

        <span class="read-more-link"><a href="#">Read More</a></span>

    </div><!-- end #left-home-content -->
</section><!-- end #left-home-content-container -->

And here's a screenshot , to illustrate what I'd like my final result to be like (the .read-more-link will take it's position from the text above, it doesn't have to be aligned to #left-home-spread ).

Any ideas? position:absolute; and float don't mix, position:relative; just has the "Spread" <div> (aka #left-home-spread ) positioning itself relative to the text content above it. Placing #left-home-spread above the content (like it is now), setting it float:right; and then giving it a large margin-top results in a gaping hole on the right side, as the margin counts as part of the floated #left-home-spread .

Ideas, anyone?

Answer 1

Looking at the picture and not reading anything, I suggest putting the spread the word element after all your paragraphs and then floating it right and using a negative top margin. No absolute/fixed positioning.

<section id="left-home-content-container" class="left-col">
    <div id="left-home-content">
        <h3><a href="#">Now Let&rsquo;s Make a Difference</a></h3>


        <p>Donec non sapien quis sapien vehicula pellentesque sed eu lacus. In at eros nec mi imperdiet tempor at non dolor. Morbi porta pretium sollicitudin. Proin blandit consequat turpis at pulvinar. Aliquam eros lectus, dictum sed consequat a, congue sed leo. In in eros at lacus laoreet feugiat. Ut pellentesque dolor eget sem vulputate bibendum. Ut pellentesque dolor eget sem vulputate biben dum biben.</p>

        <p>Nulla vehicula lobortis ullamcorper. Aliquam pellentesque, nulla non condimentum vulputate.</p>

        <div class="spread-the-word" id="left-home-spread">
            <h3>Spread the Word</h3>
            <ul class="addthis_toolbox addthis_32x32_style addthis_default_style">
                <li><a class="addthis_button_linkedin"></a></li>
                <li><a class="addthis_button_facebook"></a></li>
                <li class="last-item"><a class="addthis_button_compact"></a></li>
            </ul>
        </div>

        <span class="read-more-link"><a href="#">Read More</a></span>

    </div><!-- end #left-home-content -->
</section><!-- end #left-home-content-container -->

And CSS..

.spread-the-word { float:right; margin-top:-200px; width:200px; }

The top margin can be the height of the entire box. In my mind that works out right. You may or may not need to wrap all the paragraphs and h3 inside another container for it to work properly. But the box has to come afterwards.