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 7  1438 
On 2008-08-27, Ed Jay <ed***@aes-intl.comwrote:
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 <ed***@aes-intl.comwrote:
>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 <ed***@aes-intl.comwrote:
Ben C wrote:
>>On 2008-08-27, Ed Jay <ed***@aes-intl.comwrote:
>>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 <ed***@aes-intl.comwrote:
>Ben C wrote:
>>>On 2008-08-27, Ed Jay <ed***@aes-intl.comwrote:
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 <ed***@aes-intl.comwrote:
>>Ben C wrote:
On 2008-08-27, Ed Jay <ed***@aes-intl.comwrote:
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 <ed***@aes-intl.comwrote:
[...]
>>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 <ed***@aes-intl.comwrote:
[...]
>>>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 This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Ney André de Mello Zunino |
last post by:
Hello.
The issue is quite known: you have a block-level container holding a
set of floated elements and you need that the container's content
height take the floated elements' dimensions into...
|
by: Mike Kozlowski |
last post by:
I have an absolutely positioned block on the top of my page, a block
floated left, and a third block in the normal flow. IE6 and Mozilla
1.4 disagree on where the floated block should be placed --...
|
by: glutinous |
last post by:
I've looked at manuals and experimented until my brain's oozing out of
my ears, and I still can't figure out what I anticipate will prove to
be fairly basic css layout knowledge.
I'd be amazed if...
|
by: Joy |
last post by:
Hi guys, I am in a tricky situation, I really really hope someone will help
me.
I got a layout with a main container and three colums inside.
Main container: 100% height; 90% width; float: left...
|
by: theo |
last post by:
Please,
Why is this wide 6px border showing up where it is. It's supposed to be
at the bottom of the page, inside of base div. I'm positioning wrong,
something needs to cleared or x-index...
|
by: pasdecrap |
last post by:
The following code will produce similar results in IE6 and firefox
1.0.4
however the left margin in FF is 4 pixels and in IE it is 5.
Can anyone see why this is happening? I can't seem to figure...
|
by: Eric Lindsay |
last post by:
I seem to be running into problems when I try viewing pages at my site
http://site.sheltersrus.com.au/ using this stylesheet
http://site.sheltersrus.com.au/sheltersrus.css in Internet Explorer 6.
...
|
by: Bill Norton |
last post by:
I've been experimenting with floats, positioning and offsets (top, left, etc.) to see what happens when you mix the properties together.
All this may be old news to most of you, but it was...
|
by: aljamala |
last post by:
Hi,
I have a group of 5 tables laid out of the web page. 2 go on the left
side and 3 on the right. These tables retrieve data from the database
so the number of records (rows) returned varies....
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
| |
