panku

# December 23, 2012 at 2:50 am

I was following along [this](http://css-tricks.com/float-center/) and I just need a top offset on the image being floated center. The space on top should obviously be occupied by text around it. A negative bottom margin isn’t working.

David_Leitch

# December 23, 2012 at 6:03 am

Hey, I’ve put up a [CodePen](http://codepen.io/David_Leitch/pen/khLuC “http://codepen.io/David_Leitch/pen/khLuC”) to help you.

Basically, to make the image and text line up, you either have to position the image absolutely:

.center-float{
position: absolute;
top: 0;
left: 50%;
margin-left: -150px; /* HALF OF IMAGE WIDTH */
}

Otherwise, you must give the actual text a negative top margin, to bring it back in line with the image. That’s what I’ve done in my CodePen. You give the .l and .r divs a neg top margin of the image height. Hope that helps :)

panku

# December 23, 2012 at 6:17 am

I was trying to achieve something like this


panku

# December 23, 2012 at 6:19 am

You see here the blockquote in middle has some top offset and the text there wraps perfectly into column structure.

rodolpheb

# December 23, 2012 at 7:15 am

Maybe, it would be easier with 4 blocks of paragraphs.