Should look like this:
[img] text text
text text
How is this accomplished?
Seems straight forward, but I\'m struggling.
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;
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/