CSS Element over another on right bottom corner

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • rblaettler
    New Member
    • Jul 2007
    • 11
    #1

    CSS Element over another on right bottom corner

    Hey
    I need to position an Icon OVER the right bottom corner of an other CSS element, but with variable height and width. So just absolute positioning would not work.

    I have something working with tables:

    Code:
    <table width="100%"><tr>
    <td>
        < HERE IS THE MAIN ELEMENT />
    </td><td></td></tr><tr><td></td>            
    <td style="width:1px;">
        <div style="position:relative;">
            < HERE IS MY ICON style="position:absolute; top:-30px; left: -30px;" >            
        </div>
    </td></tr>
</table>
    It should look like something like this:

    Code:
    *******************
*                 *
*                 *
*                 *
*                 *
*             *** *
*             *   *
*             *   *
*******************
    This works, but it's ugly...
    Any better ideas?
    Tags: None
    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434
      #2
      Why wouldn't abs pos work?
      [HTML]
      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>
      <title></title>
      <meta http-equiv="content-type"
      content="text/html;charset=ut f-8">

      <style type="text/css">
      html,body{heigh t:100%;width:10 0%;
      margin:0;paddin g:0
      }
      div{
      position:relati ve;
      height:200px;
      width:200px;
      outline:1px solid red;
      }
      img{
      position:absolu te;
      height:20%;
      width:20%;
      right:0;
      bottom:0;
      }
      </style>

      </head>
      <body>
      <div>
      <img src="1.png">
      </div>
      </body>
      </html>

      [/HTML]

        Comment

        • tburger
          New Member
          • Jul 2007
          • 58
          #3
          As long as the desired element is located inside the div whose corner you want to cover, drhoward's suggestion will work.

          Even at a variable heights and widths, if you position the "corner element" absolutely with its bottom and right attributes set to 0, it will stay right where you want it...

          Tom

            Comment

            • rblaettler
              New Member
              • Jul 2007
              • 11
              #4
              Awesome, that really fixed it. Never even thought of that approach.
              Thanks a lot guys.

                Comment

                Previous template Next
                Working...