Positioning a floated element to bottom

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Ed Jay
    #1

    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

    Tags: None
    • Ben C
      #2
      Re: Positioning a floated element to bottom

      On 2008-08-27, Ed Jay <edMbj@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.

        Comment

        • Ed Jay
          #3
          Re: Positioning a floated element to bottom

          Ben C wrote:
          >On 2008-08-27, Ed Jay <edMbj@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

            Comment

            • Ben C
              #4
              Re: Positioning a floated element to bottom

              On 2008-08-27, Ed Jay <edMbj@aes-intl.comwrote:
              Ben C wrote:
              >
              >>On 2008-08-27, Ed Jay <edMbj@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.

                Comment

                • Ed Jay
                  #5
                  Re: Positioning a floated element to bottom

                  Ben C wrote:
                  >On 2008-08-27, Ed Jay <edMbj@aes-intl.comwrote:
                  >Ben C wrote:
                  >>
                  >>>On 2008-08-27, Ed Jay <edMbj@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

                    Comment

                    • Ed Jay
                      #6
                      Re: Positioning a floated element to bottom

                      Ed Jay wrote:
                      >Ben C wrote:
                      >
                      >>On 2008-08-27, Ed Jay <edMbj@aes-intl.comwrote:
                      >>Ben C wrote:
                      >>>
                      >>>>On 2008-08-27, Ed Jay <edMbj@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

                        Comment

                        • Ben C
                          #7
                          Re: Positioning a floated element to bottom

                          On 2008-08-27, Ed Jay <edMbj@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.

                            Comment

                            • Ed Jay
                              #8
                              Re: Positioning a floated element to bottom

                              Ben C wrote:
                              >On 2008-08-27, Ed Jay <edMbj@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

                                Comment

                                Previous template Next
                                Working...