3 elements, 2 stacked
by Matthew Day
HTML
<div class="bar">
<div class="toggle">+</div>
<div class="title">Education</div>
</div>
CSS
* {
box-sizing: border-box;
}
.bar {
color: white;
}
.toggle {
position: relative; /* relative position plus z-index stacks this on top*/
float: left;
width: 32px;
background: blue;
padding: 6px; /* won't need this when using an image */
border-radius: 4px;
text-align: center; /* won't need this when using an image */
z-index: 9; /* relative position plus z-index stacks this on top*/
}
.title {
float: left;
width: 90%;
background: black;
padding: 6px 0 6px 32px;
margin-left: -8px; /* this slides the bar under the blue box */
}