Having difficulty aligning unordered lists the way I want. Below is an image of my desired layout, looking for guidance on achieving the version on the right side.
I will be using between 1 and 6 unordered lists on different pages, so a universal solution is needed. Here's a simplified example of the CSS and HTML being utilized:
CSS:
body { margin: 50px auto; width: 500px; }
ul {
float:left;
margin: 0 20px 20px 0;
padding: 0;
width: 200px;
}
li {
background: #ddd;
list-style: none;
margin: 1px 0;
padding: 5px
}
li.title { background: #333; color: #fff; }
HTML:
<ul>
<li class="title">Title A</li>
<li>1A</li>
</ul>
<ul>
<li class="title">Title B</li>
<li>1B</li>
<li>2B</li>
<li>3B</li>
</ul>
<ul>
<li class="title">Title C</li>
<li>1C</li>
<li>2C</li>
</ul>