Posted by Jonathan N. Little on 05/04/07 01:56

Ciaran wrote:
> Hi does anyone know how to set the bottom margin of a left floated
> image to match the height of it's container? For example:
>
> <div style="width:200px; background-color:#CCCCCC">
> <img src="image.jpg" style="margin-right:20px; width:65px; float:left"/
> long text long text long text long text long text long text long text
> long text long text long text long text long text long text long text
> long text
> </div>
>
> This example displays a simple image and text. I want the text to stop
> wrapping beneath the image once the text clears the bottom of the
> image. I want it to stay in line all the way down regardless of the
> amount of text. Obviously it's easy with tables but what's the css
> alternative?

Need another DIV

<div style="width:200px; background-color:#CCCCCC;">
<img src="image.jpg" style="width: 65px; float: left;">
<!-- set margin = width of image + right margin on image -->
<div style="margin-left: 85px;">
long text long text long text long text long text long text
long text long text long text long text long text long text
long text long text long text
</div>
</div>


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

• Next in forum: Re: How does one stop the enter-key from working?
• Prev in forum: Re: Don't You Love When
• Thread view: Re: simple image + text CSS layout question

[Reply to this message]