I am seeking a solution for laying out my design, similar to the one shown in this image
Essentially, I have a container with a fixed height of 300px. I want to display a list vertically with each item taking up a width of 33%. If the list becomes too long, the overflowing items should float to the left.
.container {
width: 940px;
height: 300px;
margin: auto;
background: #dedede;
margin-top: 30px;
}
.item {
width: 31.2%;
background-color: #B49AD9;
margin-bottom: 10px;
padding: 10px;
}
.item > div {
display: inline-block;
vertical-align: top;
}
.item ul {
margin: 0;
padding: 0;
list-style: none;
}
.alpha {
font-weight: bold;
font-size: 2em;
}<h2>The C container should float to left and place next to A</h2>
<div class="container">
<div class="item">
<div class="alpha">A</div>
<div class="words">
<ul>
<li>Alll</li>
<li>Aoooo</li>
<li>Auuuuu</li>
</ul>
</div>
</div>
<div class="item">
<div class="alpha">B</div>
<div class="words">
<ul>
<li>Blll</li>
<li>Boooo</li>
<li>Buuu</li>
<li>Baaaaa</li>
<li>Boppoe</li>
<li>Buuuuu</li>
</ul>
</div>
</div>
<div class="item">
<div class="alpha">C</div>
<div class="words">
<ul>
<li>Clll</li>
<li>Coooo</li>
<li>Cuuu</li>
<li>Coppoe</li>
<li>Cuuuuu</li>
</ul>
</div>
</div>
</div>The purple box labeled C needs to be positioned beside A
Any suggestions on how to achieve this layout? CSS and JS solutions are both welcome :)
PS: Compatibility with at least IE9 is required... ...