Floating an ad box in the middle of an article

Discussion in 'CSS' started by Supergeek, Jun 11, 2007.

  1. #1
    I've been trying to figure out how to float an ad in the middle of my articles, without having to actually put code in between article text.

    Here's a picture of a mockup for more info:

    [​IMG]

    See how the article flows around the ad box on the top and bottom? From what I'm reading about floats, I have to break it up, like

    
    Article text blah blah blah lots of stuff here....
    <div class="adbox">
    Ad Link 1
    Ad Link 2
    etc.
    </div>
    the rest of my article continues here...
    
    Code (markup):
    Is there any way to do it without sectioning the article?

    Thanks in advance.
     
    Supergeek, Jun 11, 2007 IP
  2. duilen

    duilen Active Member

    Messages:
    354
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    58
    #2
    You could place the box at the top of the content element then give it a lot of top margin.
     
    duilen, Jun 12, 2007 IP
  3. *louie*

    *louie* Peon

    Messages:
    48
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #3
    and position absolute
     
    *louie*, Jun 12, 2007 IP
  4. CriminalOrigins

    CriminalOrigins Peon

    Messages:
    276
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #4
    That would make there be quite a bit of white space above the box, since the text doesn't fill in inside the margin. :(
     
    CriminalOrigins, Jun 13, 2007 IP
  5. *louie*

    *louie* Peon

    Messages:
    48
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #5
    nest the ad div inside the content div, give it margins and float it left.
     
    *louie*, Jun 13, 2007 IP