A multi-column unordered list has been created.
Below is the HTML code:
<ul>
<li>Antelope</li>
<li>Bison</li>
<li>Camel</li>
<li>Deer</li>
<li>Eland</li>
<li>Gazelle</li>
</ul>
The CSS code:
ul {
float: left;
width: 12em;
margin: 0;
padding: 0;
list-style: none;
}
li {
float: left;
width: 6em;
margin: 0;
padding: 0;
}
When more text is added to the second column, the entire row automatically resizes in height. However, if text is added to the first column, the row does not resize.
The goal is for the entire row to resize when text is added or reduced in any column.
The above code was referenced from this link. You can observe how a multiple column unordered list functions there.