Layouts

Here is an HTML document that will be styled to have a 2-column layout:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <div>
            <h3>First column</h3>
            <p>mi in nulla posuere sollicitudin aliquam ultrices sagittis     orci a scelerisque purus semper eget duis at tellus at urna condimentum mattis pellentesque id nibh tortor i    d aliquet lectus proin nibh nisl condimentum id venenatis a condimentum vitae sapien pellentesque habitant mo    rbi tristique senectus et netus et malesuada fames ac turpis</p>
        </div><div>
            <h3>Second column</h3>
            <p>tortor consequat id porta nibh venenatis cras sed felis eg    et velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer enim neque volutpat ac     tincidunt vitae semper quis lectus nulla at volutpat diam ut</p>
        </div>
    </body>
</html>

Each column is represented by a generic <div> element as a child of <body>. In the marked region of the HTML code, the opening tag of the second <div> comes immediately after the closing tag of the first <div> to ensure that no whitespace appears between the two columns.

Here is the code for main.css:

body>div {
    display: inline-block;
    box-sizing: border-box;
    padding: 1em;
    width: 50%;
    vertical-align: top;
}

main.css sets these two <div> elements to stack horizontally and to each have a width of 50% of the parent element. The border-box box sizing is to ensure that the padding does not increase the width of the entire element. top for vertical-align ensures that shorter columns align to the top of the tallest element on the line instead of to the bottom of the line.

The result:

First column

mi in nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget duis at tellus at urna condimentum mattis pellentesque id nibh tortor id aliquet lectus proin nibh nisl condimentum id venenatis a condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis

Second column

tortor consequat id porta nibh venenatis cras sed felis eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt vitae semper quis lectus nulla at volutpat diam ut

To create a 3-column layout, a third <div> can be inserted at the end of the body and the width of all the <div> child elements of <body> can be set to 33.3%:

3-column layout HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <div>
            <h3>First column</h3>
            <p>mi in nulla posuere sollicitudin aliquam ultrices sagittis     orci a scelerisque purus semper eget duis at tellus at urna condimentum mattis pellentesque id nibh tortor i    d aliquet lectus proin nibh nisl condimentum id venenatis a condimentum vitae sapien pellentesque habitant mo    rbi tristique senectus et netus et malesuada fames ac turpis</p>
        </div><div>
            <h3>Second column</h3>
            <p>tortor consequat id porta nibh venenatis cras sed felis eg    et velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer enim neque volutpat ac     tincidunt vitae semper quis lectus nulla at volutpat diam ut</p>
        </div><div>
            <h3>Third column</h3>
            <p>vitae suscipit tellus mauris a diam maecenas sed enim ut sem viverra aliquet eget sit amet tellus cras adipiscing enim eu turpis egestas pretium aenean pharetra magna ac placerat vestibulum lectus mauris ultrices eros in cursus turpis massa tincidunt dui</p>
        </div>
    </body>
</html>

3-column layout CSS:

body>div {
    display: inline-block;
    box-sizing: border-box;
    padding: 1em;
    width: 33.3%;
    vertical-align: top;
}

Result:

First column

mi in nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget duis at tellus at urna condimentum mattis pellentesque id nibh tortor i d aliquet lectus proin nibh nisl condimentum id venenatis a condimentum vitae sapien pellentesque habitant mo rbi tristique senectus et netus et malesuada fames ac turpis

Second column

tortor consequat id porta nibh venenatis cras sed felis eg et velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt vitae semper quis lectus nulla at volutpat diam ut

Third column

vitae suscipit tellus mauris a diam maecenas sed enim ut sem viverra aliquet eget sit amet tellus cras adipiscing enim eu turpis egestas pretium aenean pharetra magna ac placerat vestibulum lectus mauris ultrices eros in cursus turpis massa tincidunt dui