SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Vertically positioned floated items with text wrap?

    Given the markup below, which is fixed (I can't change the order of elements), I'd like to know if its possible to position the adsense336 box vertically within the .entry box?

    Ideally, I'd like to maintain a text wrap around the .adsense336 box, but the most important issue is trying to get it positioned vertically into the .entry area without overlaying the text.

    HTML Code:
    <div class="content">
    	<h1 class="posttitle">Iced Tea</h1>
     	<div class="adsense336 stacked" style="float:left;width:336px">ad block here</div>
    	<div class="entry search">Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)</div>
    </div>

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    The ad block comes first, but you want it to look like it's inside the .entry box?

    If you know the height of the ad box, you could give .entry enough top padding to push down the main content inside, making visual room for the ad block.

    Then the add block could be taken out of the flow with positioning... here, since .entry isn't a parent, you'd probably want to just use the known height of the ad box to decide how many px (or ems) lower you want it. So possibly relative positioning, with top: value set.

    You wouldn't want or need to float it though.

    I suppose if I had a better idea of the setup, I could come up with a better solution. This one could be ok, but it's brittle.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you are looking to have the adsense box moved into the middle of the text and then have the text wrap around it then the only way you can do that is by adding an extra div before the adsense like so:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    .sandbag {
        float:left;
        width:1px;
        height:100px;
        overflow:hidden;
    }
    .adsense336 {
        clear:left;
        margin:1em 1em 1em 0
    }
    </style>
    </head>
    <body>
    <div class="content">
        <h1 class="posttitle">Iced Tea</h1>
        <div class="sandbag"></div>
        <div class="adsense336 stacked" style="float:left;width:336px;height:100px;background:red">ad block here</div>
        <div class="entry search">
            <p>Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block) Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)</p>
            <p>Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block) Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)</p>
        </div>
    </div>
    </body>
    </html>
    It can only be placed a certain pixel width down and not in the exact middle though.

    Is that what you meant.

  4. #4
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    It can only be placed a certain pixel width down and not in the exact middle though.

    Is that what you meant.
    Yes, that's the idea. The only problem is that I can't insert the extra div without custom programming (which is not a problem, I'll just need to think it through to weigh cost/benefit of adding additional options to the theme)

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Scott Blanchard View Post
    Yes, that's the idea. The only problem is that I can't insert the extra div without custom programming (which is not a problem, I'll just need to think it through to weigh cost/benefit of adding additional options to the theme)
    It's a common technique with those ads as it gets the ad into the middle of the text without having to actually place it in the middle of the text (which would be invalid if you try to stick a div in a p element anyway).

    If you were only supporting IE8 and up and depending on how your adblock gets placed you could use generated content for the sandbag.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    .stacked:before {
        content:" ";
        float:left;
        width:1px;
        height:100px;
        overflow:hidden;
        margin-left:-1px;
    }
    .adsense336 div {
        width:336px;
        height:100px;
        background:red;
        clear:left;
        margin:1em 1em 1em 0;
        float:left;
    }
    </style>
    </head>
    <body>
    <div class="content">
        <h1 class="posttitle">Iced Tea</h1>
        <div class="adsense336 stacked">
            <div>ad block here</div>
        </div>
        <div class="entry search">
            <p>Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block) Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)</p>
            <p>Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block) Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)Main content block here. I want to float the adsense336 block vertically centered (or a fixed pixel amount down the content block)</p>
        </div>
    </div>
    </body>
    </html>

  6. #6
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Paul, your first example works flawlessly. I'm not sure about the 2nd example since the contents of the adsense336 div is a script that generates and iframe (all controlled by google). Perhaps we could change the "div" to "iframe". I'll give it a test.

    Its nice to have both solutions to choose from.

    If I post here, its usually because I think the problem is unsolvable outside of this forum. Once again, I'm in awe of your command of the css spec.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •