simple image + text CSS layout question

[Ciaran]

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:

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?

Cheers,
Ciarán

 

[dorayme]

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:


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?

Cheers,
Ciarán

What you can do is float a div left, specify it to contain the
img etc, and have another div alongside of it with a left margin
equal or a little bit greater than the width of the floated div.
If you have text in this second div, it will be go down the page
without wrapping under the pic. If you want a demo, you post a
url first with an attempt.

 

[Jonathan N. Little]

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>

 

[Ciaran]

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>

Ah right! Very clever! Thank you both!

 

[BootNic]

[email protected]
Ciaran wrote: [snip]

Need another DIV

<div style="width:200px; background-color:#CCCCCC;">

It may be a good thing to set overflow:hidden; for times when
the text height may be shorter then the image.

<div style="width:200px; background-color:#CCCCCC;
overflow:hidden;">

<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>

--
BootNic Saturday, May 05, 2007 11:30 AM

A person without a sense of humor is like a wagon without springs,
jolted by every pebble in the road.
*Henry Ward Beecher*

 

[Neredbojias]

Ah right! Very clever! Thank you both!

Why don't you use just 1 div, position it relative, set left padding equal
to the width of the image plus buffer, and absolutely position the image in
the upper left corner?

 

[Jonathan N. Little]

Why don't you use just 1 div, position it relative, set left padding equal
to the width of the image plus buffer, and absolutely position the image in
the upper left corner?

Could work. Better actually, no need extra element.

 

[Neredbojias]

Could work. Better actually, no need extra element.

Haven't dallied with that particular procedure in a bit. IE 6 could be a
prob, but there's conditional comments...

 

[Jonathan N. Little]

Haven't dallied with that particular procedure in a bit. IE 6 could be a
prob, but there's conditional comments...

No, seems to work just fine. Even 5.5 5.01 AND 4.01!