CSS help - How do I float a div in an upper right quadrant of another div sort of? I need to make an L shape.

Question

Hi All, I need to make some type of L shaped div I guess? I currently have two floating divs side by side that are the same width and height. I need to extend the left one down and around the right one. I need to maintain the current space between them, about 15px, so I would like the same padding schema on the bottom of the right div. I'm going to attempt to draw what I mean. I apologize if it doesn't come across as I intend.

//      _________ _________
//      |       | |       |
//      |       | |       |
//      |       | |       |
//      |       | |       |
//      |       | ---------
//      |        ---------|
//      |                 |
//      |                 |
//      |                 |
//      |                 |
//      -------------------
//

Any ideas how I can set this up? I was thinking to make the left one a bit taller and then add a 3rd div below and just mash it up under the 1st div or something. Any tips are appreciated. I am CSS challenged. :)

Thanks All, ~ck in San Diego

Answer 1

<div id="outer">
  <div id="inset">Top right</div>
  Rest of content
<div>

with:

#inset { float: right; margin-bottom: 15px; margin-left: 15px; }

Answer 2

<div id="base">
   <div id="corner">
      <!--stuff inside corner-->
   </div>
   <!--other stuff inside base-->
</div>

... where your styles are (for cleaner IE implementation):

#base {position: relative; width: 100px; height: 100px;}
#corner {float: right; position: relative; width: 50px; height: 50px; margin: 0 0 15px 15px;}

... and if you have other floated elements inside "base", make the style for corner:

#corner {float: right; position: absolute; top: 0; right: 0; width: 50px; height: 50px; margin: 0 0 15px 15px;}