 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / August 2008Positioning 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|  SignatureEd Jay (remove 'M' to reply by email) Win the War Against Breast Cancer. Knowing the facts could save your life. http://www.breastthermography.info > 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 [quoted text clipped - 13 lines] >|Left div| >| | |right div| clear: left and margin-top: -1.1em on the right hand div. >> 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 [quoted text clipped - 15 lines] > >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? SignatureEd Jay (remove 'M' to reply by email) Win the War Against Breast Cancer. Knowing the facts could save your life. http://www.breastthermography.info >>> 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 [quoted text clipped - 19 lines] > > 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. >>>> 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 [quoted text clipped - 25 lines] > >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. SignatureEd Jay (remove 'M' to reply by email) Win the War Against Breast Cancer. Knowing the facts could save your life. http://www.breastthermography.info >>>>> 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 [quoted text clipped - 36 lines] >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. SignatureEd Jay (remove 'M' to reply by email) Win the War Against Breast Cancer. Knowing the facts could save your life. http://www.breastthermography.info [...] >>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 finally grasped the logic. Because of a 5px bottom margin on both divs, I [quoted text clipped - 7 lines] > >Specifying the bottom margin as 0.5em will be more robust. I'm one step ahead...already changed the bottom margin to .5em. :-) SignatureEd 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 to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.