6

I want a parent class (ul tag) to hold a bunch of li tags to that overlap each other, here is my code:

<ul class="overlap">
    <li>
        Overlap One
    </li>
    <li>
        Overlap Two
    </li>
    <li>
        Overlap Three
    </li>
</ul>

I don't want them to be positioned absolutely, because I have a parent element that has a background border and color, but when I position the children absolutely, the parent doesn't stretch, here is the code in its entirety.

<blockquote>
 <ul class="overlap">
    <li>
        Overlap One
    </li>
    <li>
        Overlap Two
    </li>
    <li>
        Overlap Three
    </li>
</ul>
</blockquote>

The blockquote tag has a background color on to it, that is why the children cannot be positioned absolutely.

Thanks in advance for the help!

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Abdullah Bakhsh
  • 658
  • 1
  • 9
  • 15

2 Answers2

6

Like this? http://jsfiddle.net/2N8Jz/

<blockquote class="clearfix">
  <ul class="overlap">
    <li>Overlap One</li>
    <li>Overlap Two</li>
    <li>Overlap Three</li>
  </ul>
</blockquote>
​

blockquote {
    border: 1px solid black;    
    padding: 10px;
}

.overlap {
    padding-left: 10px;
}

.overlap li {
    border: 1px solid grey;
    float: left;
    margin: 0 0 0 -10px;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}
​
Rob Lowe
  • 827
  • 6
  • 10
1

Giving the <li>'s a negative margin should do the trick.

here's an example: http://jsfiddle.net/wvEms/1/

barro32
  • 2,559
  • 23
  • 36