View Single Post
  #5 (permalink)  
Old 08-28-2008, 02:09 AM
Ed Jay
Guest
 
Posts: n/a
Diggs:
Default Re: Positioning a floated element to bottom

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
Reply With Quote