Forum Moderators: not2easy
I am trying to create a box with an image aligned to the left inside the box, and text to the right of the box. I created an .gif of my thought to make it easier to understand.
Any help with both CSS and HTML to create the above effect would be awesome! Thanks!
I would absolutely position the image to avoid the text from wrapping.
Markup:
<div class="box">
<img class="image" src="blah.gif">
<p class="text">text text text</p>
</div>
CSS:
box {
position: relative; /* Allows children to be absolutely positioned within box */
}
img.image {
position: absolute;
top: 0;
left: 0;
}
p.text {
margin-left: 100px; /*replace w/ image width + spacing */
}