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!
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%;
}