473,837 Members | 1,429 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Positioning a floated element to bottom

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
Aug 27 '08 #1
7 1469
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.
Aug 27 '08 #2
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
Aug 27 '08 #3
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.
Aug 27 '08 #4
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;marg in-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
Aug 27 '08 #5
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;marg in-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
Aug 27 '08 #6
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;marg in-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.
Aug 27 '08 #7
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;marg in-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
Aug 27 '08 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
2878
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 consideration. E.g.: <div class="images"> <div class="image"><img src="example1.png" width="160" height="120" alt=""></div> <div class="image"><img src="example2.png" width="160" height="120"
0
2359
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 -- IE thinks its top margin should be relative to the containing block (i.e., the body), while Mozilla thinks it should be relative to the bottom of the absolutely positioned block. My instincts, of course, are to assume that Mozilla's correct --...
7
1913
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 this was the first (or even if only the 100th) time someone has asked about this sort of situation. So I apologise, not least for the awkwardness of my attempt below to illustrate my ignorance. I could produce a table such as this...
5
8107
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 First colum: 100% height; 200px width; float: left Second colum: 100% height; 200px width; float: right Third colum: 100% height And here I stop, because nothing seems to work in order to set correctly
7
1863
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 specified, or something. HELP??? http://wholives.com/temp/cssr.htm Thanks,
17
14380
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 it out! TIA Jeff <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
4
1586
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. While I still have several problems with the CSS, the one that mainly concerns me is the sidebars on the left hand side overlay the main content of the page. These are divs that float the sidebar left and the main content right. I thought I had...
9
3390
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 extremely helpful to me. The results are summarized in this chart. In all these tests I was using a single child element inside a containing block. (I hope the formatting doesn't fall apart too badly when it's uploaded to a newsgroup.) | Do Floats | Do...
5
1888
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. So the problem I am having at the moment is that if the table gets longer by one or two rows, all my alignment goes of out whack for the other tables. Is there a way for example to place table #2 right after table#1 ends?
0
9682
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10874
Oralloy
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
10623
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10271
tracyyun
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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9398
agi2029
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, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
5668
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5848
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4474
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
3124
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.