Web Page Content in Columns Using Div

This tutorial shows how to have the content in a web page arranged into columns using the HTML div (for division) tag rather than using the table tag and its child tags. Using styles to arrange two divs side-by-side is useful when wanting to group and keep content together in a magazine style. For example having the main page content on the left and several advertisements on the right.

HTML Columns

Experimenting with HTML is easy on a computer using a simple text editor, such as Notepad on Windows (or even better Notepad++), for an introduction to a basic HTML page see Hello World in HTML. Create a basic HTML file with some content for the top and bottom of the page and left and right columns, such as this example:

<!DOCTYPE html>
<html>
    <head>
        <title>Web Page</title>
    </head>
    <body>
        <h1>Colors</h1>
        <p style="background:blue;color:white;">This background is blue.</p>
        <p style="background:red;color:white;">This background is red.</p>
        <p>Which is your favourite color?</p>
    </body>
</html>

Will produce this output:

Simple HTML Web Page

Divs will be used to place the blue and red paragraphs next to each other. Just wrapping the p (paragraph) in a div has no effect. The div needs to float:

<!DOCTYPE html>
<html>
    <head>
        <title>Web Page</title>
    </head>
    <body>
        <h1>Colors</h1>
        <div style="float:left;">
            <p style="background:blue;color:white;">This background is blue.</p>
        </div>
        <div style="float:left;">
            <p style="background:red;color:white;">This background is red.</p>
        </div>
        <p>Which is your favourite color?</p>
    </body>
</html>

The above code see the red paragraph next to the blue, but also the last paragraph.

Simple Web Page with Float

The floated elements become disconnected from the normal layout flow and try to fit within the current lines, the follow on elements carry on with the normal flow. Which here is on the same line as the floated paragraphs, immediately after them (see what happens when the browser window is made even smaller). To fix the issue the follow on element must be clear of floats:

<!DOCTYPE html>
<html>
    <head>
        <title>Web Page</title>
    </head>
    <body>
        <h1>Colors</h1>
        <div style="float:left;">
            <p style="background:blue;color:white;">This background is blue.</p>
        </div>
        <div style="float:left;">
            <p style="background:red;color:white;">This background is red.</p>
        </div>
        <p style="clear:left">Which is your favourite color?</p>
    </body>
</html>

Simple Web Page with Float and Clear

Use margin to place a gap between the columns and width to fix their sizes:

<!DOCTYPE html>
<html>
    <head>
        <title>Web Page</title>
        <style>
            div { float:left; width:100px; margin-right:10px}
        </style>
    </head>
    <body>
        <h1>Colors</h1>
        <div style="float:left;">
            <p style="background:blue;color:white;">This background is blue.</p>
        </div>
        <div style="float:left;">
            <p style="background:red;color:white;">This background is red.</p>
        </div>
        <p style="clear:left">Which is your favourite color?</p>
    </body>
</html>

Paragraphs with float, right margin and width

Tek Eye

Web Page Content in Columns Using Div

See Also

Do you have a question or comment about this article?