Float text around image

Question

I need help creating a text container floating around the price tag like seen on this picture :

Answer 1

Here is a solution that works only if you have fixed height divs (here .product) :

jsFiddle Demo

You will have to put your .pricetag div before the text. Then, the main trick is to use a spacer floated right with a width of 0 :

HTML :

<div class="product">
    <div class="pricetagspacer"></div>
    <div class="pricetag">
        999 €
    </div>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>

CSS :

.pricetag
{
    height: 54px;
    width: 115px;
    background: url('http://i.imgur.com/ES3wymx.png') no-repeat;
    float: right;
    padding-top: 20px;
    padding-left: 5px;
    font-weight: bold;
    clear: right; /* to be positioned under the spacer */
    position: relative; 
    right: -24px; /* to go a bit offside */
    margin-left: -24px; /* corrected margin because of the previous line */
}
.pricetagspacer {
    height: 100%; /* to space the whole height */
    width: 0; /* so we don't have more "padding" on the right of .product */
    float: right;
    margin-bottom: -65px; /* to eventually position correctly the .pricetag */
}

Answer 2

You just need to apply a float on your image, or div that you want to have on the right hand side.

div {float:right;}

Answer 3

Tip

sub

position:absolute; z-index:2;

main

position:relative; z-index:1;