I have two divs. The left div is floated left and the right div is floated
right. If the left div contains a single line, the left and right divs are
on the same line (obviously). But...the left div content is dynamic and its
content can occupy two or three lines, When it contains more than one line,
the right div is positioned on the top line of the left div content. I need
(want) it to be positioned on the last (lowest) line of the left div
content. How do I do it?

Example:

I get:
|Left div| |right div|
| |

I want:
|Left div|
| | |right div|


--
Ed Jay (remove 'M' to reply by email)

Win the War Against Breast Cancer.
Knowing the facts could save your life.
http://www.breastthermography.info

On 2008-08-27, Ed Jay <edMbj@aes-intl.com> wrote:
> I have two divs. The left div is floated left and the right div is floated
> right. If the left div contains a single line, the left and right divs are
> on the same line (obviously). But...the left div content is dynamic and its
> content can occupy two or three lines, When it contains more than one line,
> the right div is positioned on the top line of the left div content. I need
> (want) it to be positioned on the last (lowest) line of the left div
> content. How do I do it?
>
> Example:
>
> I get:
>|Left div| |right div|
>| |
>
> I want:
>|Left div|
>| | |right div|

clear: left and margin-top: -1.1em on the right hand div.

Ben C wrote:

>On 2008-08-27, Ed Jay <edMbj@aes-intl.com> wrote:
>> I have two divs. The left div is floated left and the right div is floated
>> right. If the left div contains a single line, the left and right divs are
>> on the same line (obviously). But...the left div content is dynamic and its
>> content can occupy two or three lines, When it contains more than one line,
>> the right div is positioned on the top line of the left div content. I need
>> (want) it to be positioned on the last (lowest) line of the left div
>> content. How do I do it?
>>
>> Example:
>>
>> I get:
>>|Left div| |right div|
>>| |
>>
>> I want:
>>|Left div|
>>| | |right div|
>
>clear: left and margin-top: -1.1em on the right hand div.

Thank you. Very much!

Your solution almost worked, but the lines didn't quite align. Ended up with
setting the right margin to +1em, without the clear left, and it lined up
OK. This works fine for two lines of content, but what if the content
occupies three or more lines?

--
Ed Jay (remove 'M' to reply by email)

Win the War Against Breast Cancer.
Knowing the facts could save your life.
http://www.breastthermography.info

On 2008-08-27, Ed Jay <edMbj@aes-intl.com> wrote:
> Ben C wrote:
>
>>On 2008-08-27, Ed Jay <edMbj@aes-intl.com> wrote:
>>> I have two divs. The left div is floated left and the right div is floated
>>> right. If the left div contains a single line, the left and right divs are
>>> on the same line (obviously). But...the left div content is dynamic and its
>>> content can occupy two or three lines, When it contains more than one line,
>>> the right div is positioned on the top line of the left div content. I need
>>> (want) it to be positioned on the last (lowest) line of the left div
>>> content. How do I do it?
>>>
>>> Example:
>>>
>>> I get:
>>>|Left div| |right div|
>>>| |
>>>
>>> I want:
>>>|Left div|
>>>| | |right div|
>>
>>clear: left and margin-top: -1.1em on the right hand div.
>
> Thank you. Very much!
>
> Your solution almost worked, but the lines didn't quite align.

I thought you might ask that.

> Ended up with setting the right margin to +1em, without the clear

You mean the top margin on the right div

> left, and it lined up OK. This works fine for two lines of content,
> but what if the content occupies three or more lines?

Better to go with the original negative margin, but also set line-height:
1.1em on the right div.

Ben C wrote:

>On 2008-08-27, Ed Jay <edMbj@aes-intl.com> wrote:
>> Ben C wrote:
>>
>>>On 2008-08-27, Ed Jay <edMbj@aes-intl.com> wrote:
>>>> I have two divs. The left div is floated left and the right div is floated
>>>> right. If the left div contains a single line, the left and right divs are
>>>> on the same line (obviously). But...the left div content is dynamic and its
>>>> content can occupy two or three lines, When it contains more than one line,
>>>> the right div is positioned on the top line of the left div content. I need
>>>> (want) it to be positioned on the last (lowest) line of the left div
>>>> content. How do I do it?
>>>>
>>>> Example:
>>>>
>>>> I get:
>>>>|Left div| |right div|
>>>>| |
>>>>
>>>> I want:
>>>>|Left div|
>>>>| | |right div|
>>>
>>>clear: left and margin-top: -1.1em on the right hand div.
>>
>> Thank you. Very much!
>>
>> Your solution almost worked, but the lines didn't quite align.
>
>I thought you might ask that.
>
>> Ended up with setting the right margin to +1em, without the clear
>
>You mean the top margin on the right div

Yup. :-)
>
>> left, and it lined up OK. This works fine for two lines of content,
>> but what if the content occupies three or more lines?
>
>Better to go with the original negative margin, but also set line-height:
>1.1em on the right div.

I finally grasped the logic. Because of a 5px bottom margin on both divs, I
ended up with clear:left;margin-top:-0.5em; Works great. Thanks.

--
Ed Jay (remove 'M' to reply by email)

Win the War Against Breast Cancer.
Knowing the facts could save your life.
http://www.breastthermography.info

Ed Jay wrote:

>Ben C wrote:
>
>>On 2008-08-27, Ed Jay <edMbj@aes-intl.com> wrote:
>>> Ben C wrote:
>>>
>>>>On 2008-08-27, Ed Jay <edMbj@aes-intl.com> wrote:
>>>>> I have two divs. The left div is floated left and the right div is floated
>>>>> right. If the left div contains a single line, the left and right divs are
>>>>> on the same line (obviously). But...the left div content is dynamic and its
>>>>> content can occupy two or three lines, When it contains more than one line,
>>>>> the right div is positioned on the top line of the left div content. I need
>>>>> (want) it to be positioned on the last (lowest) line of the left div
>>>>> content. How do I do it?
>>>>>
>>>>> Example:
>>>>>
>>>>> I get:
>>>>>|Left div| |right div|
>>>>>| |
>>>>>
>>>>> I want:
>>>>>|Left div|
>>>>>| | |right div|
>>>>
>>>>clear: left and margin-top: -1.1em on the right hand div.
>>>
>>> Thank you. Very much!
>>>
>>> Your solution almost worked, but the lines didn't quite align.
>>
>>I thought you might ask that.
>>
>>> Ended up with setting the right margin to +1em, without the clear
>>
>>You mean the top margin on the right div
>
>Yup. :-)
>>
>>> left, and it lined up OK. This works fine for two lines of content,
>>> but what if the content occupies three or more lines?
>>
>>Better to go with the original negative margin, but also set line-height:
>>1.1em on the right div.
>
>I finally grasped the logic. Because of a 5px bottom margin on both divs, I
>ended up with clear:left;margin-top:-0.5em; Works great. Thanks.

Errr....time for more coffee. I meant -1.5em.

Thanks again.

--
Ed Jay (remove 'M' to reply by email)

Win the War Against Breast Cancer.
Knowing the facts could save your life.
http://www.breastthermography.info

On 2008-08-27, Ed Jay <edMbj@aes-intl.com> wrote:
[...]
>>I finally grasped the logic. Because of a 5px bottom margin on both divs, I
>>ended up with clear:left;margin-top:-0.5em; Works great. Thanks.
>
> Errr....time for more coffee. I meant -1.5em.

That only works though if 0.5em = 5px, i.e. the font-size is 10px. Users
often override the font-size even if you set it, especially if you set
it to something as small as 10px.

Specifying the bottom margin as 0.5em will be more robust.

Ben C wrote:

>On 2008-08-27, Ed Jay <edMbj@aes-intl.com> wrote:
>[...]
>>>I finally grasped the logic. Because of a 5px bottom margin on both divs, I
>>>ended up with clear:left;margin-top:-0.5em; Works great. Thanks.
>>
>> Errr....time for more coffee. I meant -1.5em.
>
>That only works though if 0.5em = 5px, i.e. the font-size is 10px. Users
>often override the font-size even if you set it, especially if you set
>it to something as small as 10px.
>
>Specifying the bottom margin as 0.5em will be more robust.

I'm one step ahead...already changed the bottom margin to .5em. :-)

--
Ed Jay (remove 'M' to reply by email)

Win the War Against Breast Cancer.
Knowing the facts could save your life.
http://www.breastthermography.info