Previous chapter (HTML Elements - Tables)Next chapter (HTML Elements - Links)

List Columns

Unordered or ordered lists can be arranged in two, three, or more columns using nothing more than css. We force the list to break at the right point. If We want two columns, you need to float the list items left and set them at 50% width and for three columns would require a width of 33% and floated left, four would be 25% and so on.

Other examples in Lists (HTML Elements)

Result from the Online TryIt-Editor

<!doctype html>
<html>
<head>
    <title>HtmlNest.com live html example</title>
    <style type="text/css" media="screen">
        ol
        {
            margin-bottom: 20px;
            overflow: hidden;
            border-top: 1px solid #ccc;
        }
        li
        {
            line-height: 1.5em;
            border-bottom: 1px solid #ccc;
            float: left;
            display: inline;
        }
    #two li  { width:50%;} /* 2 columns */
    #three li  { width:33.3%; } /* 3 columns */
    #four li    { width:25%; } /* 4 columns */
    #eight li     { width:12.5%; } /* 8 columns */
    </style>
</head>
<body>
    <ol id="two">
        <li>HTML</li>
        <li>HTML5</li>
        <li>CSS</li>
        <li>CSS3</li>
        <li>Semantics</li>
        <li>Accessibility</li>
        <li>Usability</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Tutorials</li>
        <li>References</li>
        <li>Examples</li>
        <li>Validations</li>
    </ol>
</body>
</html>

^1.0

^1.3

^1.0

^5.0

^7.0

List Columns

Useful Information