Question

Want to make a vocabulary list in HTML & CSS that looks like this:

Header (space space space space) Header 2
1. number one text (space space s) 4. number four
2. number two (space space space) 5. number five
3. number three text (space space ) 6. number six

When you reduce your browser, the list changes to

Header
1. number one
2. number two
3. number three

Header 2
4. number four
5. number five

The easiest would be to use a table but it does not change like the above when you shrink the browser. If you use list, one must use padding, which also gets weird when you reduce your browser.

Answer 1

You should be able to do this with CSS using float. This will make the two appear side by side unless the container width becomes less than both of their widths combined (plus border), then they will stack. Obviously you would want to do some styling, and you don’t need to use UL/LI, you could even use a table inside the div.

​#table1 {
    border: 1px solid #000;
    float: left;
    width: 200px;
}

#table2 {
    border: 1px solid #000;
    float: left;
    width: 200px;

}

<div id='table1'>
    <h1>Head 1</h1>
    <ul>
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
    </ul>
</div>
<div id='table2'>
    <h1>Head 2</h1>
    <ul>
     <li>Item 4</li>
     <li>Item 5</li>
     <li>Item 6</li>
    </ul>
</div>