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.
<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>
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.
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:
<!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.
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.
<!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>
@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.