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
<div id="outer">
<div id="inset">Top right</div>
Rest of content
<div>
with:
#inset { float: right; margin-bottom: 15px; margin-left: 15px; }
<div id="base">
<div id="corner">
<!--stuff inside corner-->
</div>
<!--other stuff inside base-->
</div>
... where your styles are:
#base {width: 100px; height: 100px;}
#corner {float: right; width: 40px; height: 40px; margin: 0 0 15px 15px;}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With