CODEWITHSUNDEEP
htmlcss
Endophage
Endophage

Reputation: 21473

What is the correct code to wrap content around a div?

I have some content coming back from a CMS and want to add a Google Adsense placement part way down it. I could of course parse the content and read down a few paragraphs and insert the html there, but ideally I was hoping I could make the text wrap without having to do this.

Here's is an example of what I'm getting now:

                                Lorem ipsum dolor sit amet, consectetur adipiscing elit.                                         
                                Duis id venenatis lorem. Donec et
                                erat vitae neque tempus molestie nec tempor lacus. Nunc                
                                ncidunt placerat nulla nec 
                                luctus. Vestibulum ante ipsum primis in faucibus orci 
                                luctus et ultrices posuere cubilia 
                                urae; Fusce eu libero eget velit commodo ornare. Vivamus 
                                convallis posuere nulla. Vivamus 
________________________________non tellus ac nibh placerat tempus. Nam id tellus sit amet 
                               |ipsum lobortis dictum. 
                               |Vestibulum ante ipsum primis in faucibus orci luctus et 
                               |ultrices posuere cubilia Curae; 
                               |Pellentesque habitant morbi tristique senectus et netus et                    
                               |malesuada fames ac turpis 
                               |egestas. Vestibulum ante ipsum primis in faucibus orci  
           ADSENSE             |luctus et ultrices posuere cubilia 
                               |Curae; Donec accumsan, arcu non ornare suscipit, massa 
                               |mauris iaculis purus, eget dapibus 
                               |erat nisl at nunc. Phasellus ac odio diam, ac tempor mi. 
                               |Phasellus magna felis, faucibus et 
                               |tincidunt id, rutrum ac mauris. Nullam elementum, lorem 
_______________________________|eget cursus imperdiet, turpis magna 
ultricies urna, vulputate tristique magna ante et magna.

And obviously what I want is:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id venenatis lorem. Donec et
erat vitae neque tempus molestie nec tempor lacus. Nunc ncidunt placerat nulla nec 
luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia 
urae; Fusce eu libero eget velit commodo ornare. Vivamus convallis posuere nulla. Vivamus 
________________________________non tellus ac nibh placerat tempus. Nam id tellus sit amet
                               |ipsum lobortis dictum. 
                               |Vestibulum ante ipsum primis in faucibus orci luctus et 
                               |ultrices posuere cubilia Curae; 
                               |Pellentesque habitant morbi tristique senectus et netus et                    
                               |malesuada fames ac turpis 
                               |egestas. Vestibulum ante ipsum primis in faucibus orci  
           ADSENSE             |luctus et ultrices posuere cubilia 
                               |Curae; Donec accumsan, arcu non ornare suscipit, massa 
                               |mauris iaculis purus, eget dapibus 
                               |erat nisl at nunc. Phasellus ac odio diam, ac tempor 
                               |Phasellus magna felis, faucibus et 
                               |tincidunt id, rutrum ac mauris. Nullam elementum, lorem 
_______________________________|eget cursus imperdiet, turpis magna 
    ultricies urna, vulputate tristique magna ante et magna.

I've tried just about every combination of float, margins, positions with top set and can't get the display as desired.

Upvotes: 2

Views: 94

Answers (3)

NGLN
NGLN

Reputation: 43649

You have to add an extra element before your AdSense div, like in this demo fiddle.

CSS:

#admargin {
    float: left;
    width: 0;
    height: 60px;
}
#ad {
    clear: left;
    float: left;
}
p {
    line-height: 20px;
}

HTML:

<div id="admargin"></div>
<div id="ad"></div>
<p>Lorem ipsum dolor sit amet...</p>

Upvotes: 3

Nick Larsen
Nick Larsen

Reputation: 18877

It looks like you are floating content from the top of the container and setting a top margin, when you need to be inserting the float somewhere in the middle of your content.

<!-- all of your html wrapper stuff -->
<div class="article">
    <div class="ads">Support our sponsers!</div>
    <!-- a bunch of text content -->
</div>
<!-- end of your html wrapper stuff -->

What you need is something more like:

<!-- all of your html wrapper stuff -->
<div class="article">
    <!-- beginning of text content -->
    <div class="ads">Support our sponsers!</div>
    <!-- end of text content -->
</div>
<!-- end of your html wrapper stuff -->

And the css for both simply floats the ad container left and specifies the width and height.

Upvotes: 2

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 174957

Actually, a simple float should really do the trick here.

Here's an example. The code used here is:

#float {
    background: red;
    width: 50px;
    height: 50px;
    float: left;
}

EDIT: I misunderstood your question, the ad is at the top of the container! (you should really add that!)

Well, I really don't think there's a way to do it in CSS alone, you'll have to move the div deeper into the text node using some nifty javascript solution.

Upvotes: 0

Related Questions