Looking to align three different types of lists next to each other: an unordered list, an ordered list, and a description list. I've experimented with various methods but haven't had success getting them to display side by side. If anyone has insight on the correct way to achieve this, I'd appreciate it. Here is how I attempted it:
#schedule {
}
#schedule ul {
list-style-type: none;
display: inline-block;
}
#schedule ol {
list-style-type: none;
display: inline-block;
}
#schedule dl {
list-style-type: none;
display: inline-block;
}
This was my CSS code for the following HTML structure:
<aside id="schedule">
<h2>Favourite Teachers</h2>
<ul>
<li>Steve Sutherland</li>
<li>Steve Sutherland</li>
<li>Steve Sutherland</li>
</ul>
<h2>Favourite Classes</h2>
<ol>
<li>Web Programming</li>
<li>Tim's</li>
<li>The Den</li>
</ol>
<h2>Favourite lessons</h2>
<dl>
<dt>First Webpage</dt>
<dd>Got me hooked</dd>
<dt>Images and videos</dt>
<dd>Endless joke possibilities</dd>
</dl>
</aside>