Vertically align image and text

Question

How can I align image and text horizontally without moving the other text under the image

I like to do this (sample XXXXX is a big image)

XXXXXXXX  This          


        

Answer 1

Just float the image to the left

img {
   float: left;
}

What happens after floating the image to the left is it will create an empty space on the right so that text will set the way you want.

Note : Never forget to clear your floats...Also you might like to wrap this up inside a container div

Rest :

You could give class to an img you want to float so instead of using img{float: left;} you should use img.class_name {float: left;} so that it will target the image precisely, also you might like to wrap up the text inside p element as Sam Carrington told you so that you could padd up the text and also style it...

Demo Fiddle

HTML

    
    
Hi this is big long text I want to place it to the right of my image
    

CSS

.wrapper {
    border: 1px solid #f00;
}

.to_the_left {
    float: left;
}

.clear {
    clear: both;
}

p.paragraph {
    padding-top: 30px; /* You can set accordingly */
}