CODEWITHSUNDEEP
cssimage
JoJ
JoJ

Reputation: 133

Align text to the right of an image && text doesn't wrap around the image

Should look like this:

[img] text text
      text text

How is this accomplished?

Seems straight forward, but I'm struggling.

Upvotes: 11

Views: 16678

Answers (2)

Jason Gennaro
Jason Gennaro

Reputation: 34855

You can use display:inline-block;

img{
    display:inline-block;
    width:75px;
    height:100px;
    border:1px solid red;
    vertical-align:top;
    margin-right:10px;
}

div{
    display:inline-block;
    width:200px;
}

Example: http://jsfiddle.net/jasongennaro/SK9ad/

To make inline-block; work with IE7, add the following to each rule:

zoom: 1;
*display:inline;

Upvotes: 7

Paul
Paul

Reputation: 141829

Since you know the dimensions of the image:

HTML:

<div style="position: relative;">
    <img id="theimg" ... />
    <div id="besidetheimg">
    </div>
</div>

CSS:

#theimg{
    position: absolute;
    top: 50%;
    margin-top: -50px; // Half the width of the image
    width: 100px;
    height: 100px;
}

#besidetheimg{
    margin-left: 100px; // width of image
}

It's a bit of a weird way to do it. I'm not sure if there is a better way though, and it works: http://jsfiddle.net/dvLqC/

Upvotes: 2

Related Questions