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

<div class="wrapper">
    <img class="to_the_left" src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />
    <p class="paragraph">Hi this is big long text I want to place it to the right of my image</p>
    <div class="clear"></div>
</div>

CSS

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

.to_the_left {
    float: left;
}

.clear {
    clear: both;
}

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

Answer 2

#wrap .image img { float: left; width: 200px;}

Answer 3

You should always contain the text in the div inside a semantic element - this will have the advantage of allowing you to target the text in a unique container using css.

<div class='image'>
  <img src="/test/1.jpg" />
  <p class="sidebar">This is a big image  all text should not goes down the image</p>
</div>