simple image + text CSS layout question

simple image + text CSS layout question

am 04.05.2007 02:31:03 von cronoklee

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


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

Re: simple image + text CSS layout question

am 04.05.2007 03:08:48 von dorayme

In article
<1178238663.268847.199600@y80g2000hsf.googlegroups.com>,
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:
>
>


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

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

--
dorayme

Re: simple image + text CSS layout question

am 04.05.2007 03:56:11 von lws4art

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


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

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





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




--
Take care,

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

Re: simple image + text CSS layout question

am 04.05.2007 13:35:15 von cronoklee

On May 4, 2:56 am, "Jonathan N. Little" wrote:
> 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:
>
> >


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

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

>
>
>

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

>

>
> --
> Take care,
>
> Jonathan
> -------------------
> LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com- Hide quoted text -
>
> - Show quoted text -


Ah right! Very clever! Thank you both!

Re: simple image + text CSS layout question

am 05.05.2007 17:30:51 von BootNic

> Jonathan N. Little wrote:
> news: 47989$463a925f$40cba7aa$25648@NAXS.COM
> Ciaran wrote:
[snip]
>
> Need another DIV
>
>



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



>
>
>

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

>


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

Re: simple image + text CSS layout question

am 06.05.2007 03:14:10 von Neredbojias

On Fri, 04 May 2007 11:35:15 GMT Ciaran scribed:

>> Need another DIV
>>
> 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?

--
Neredbojias
He who laughs last sounds like an idiot.

Re: simple image + text CSS layout question

am 06.05.2007 07:34:17 von lws4art

Neredbojias wrote:
> On Fri, 04 May 2007 11:35:15 GMT Ciaran scribed:
>
>>> Need another DIV
>>>
>> 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?
>

Could work. Better actually, no need extra element.

--
Take care,

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

Re: simple image + text CSS layout question

am 07.05.2007 21:56:20 von Neredbojias

On Sun, 06 May 2007 05:34:17 GMT Jonathan N. Little scribed:

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

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

--
Neredbojias
He who laughs last sounds like an idiot.

Re: simple image + text CSS layout question

am 07.05.2007 22:10:13 von lws4art

Neredbojias wrote:
> On Sun, 06 May 2007 05:34:17 GMT Jonathan N. Little scribed:
>
>>> 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.
>
> 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!

--
Take care,

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