Tip: Three steps to a two column CSS layout

I certainly did not originate this method of creating a two column layout, but I will summarize it for you. Step one: create a wrapper or container div and give it a CSS rule: position:relative.

#wrapper {
position: relative;
}

I’m temporarily ignoring the need for headers and footers. You can adjust for them. Step two: position the first div (we’ll call it #nav) using position:absolute. The numbers you use for top and left determine whether this column will be on the right or the left side of your page. Give the div a suitable width for your navigation.

#nav {
width: 20%;
position: absolute;
left: 10px;
top: 40px;
}

Step three: Use a margin to create a second column with another div (we’ll call it #content). If the nav is on the left, use a wide margin-left. If the nav is on the right, use a wide margin-right. Assign a width that allows for the nav.

#content{
width: 70%;
margin-left: 25%;
}

7 thoughts on “Tip: Three steps to a two column CSS layout”

  1. Absolutely positioned DIVs can line up inside a container DIV defined as relative. The absolutely positioned divs still move up and down on the page in response to font-size changes and their position in relation to each other.

    There are other ways to create a similar layout using floats. But floats have their own set of issues and this layout avoids them. That’s what I found interesting about this way of doing it.

    Virginia

  2. What if you want two columns that automatically arrange the text so that it wraps to the next column and ends up even height on both sides? Is that doable?

        1. 7. Filling columns

          There are two strategies for filling columns: columns can either be balanced, or not. If columns are balanced, UAs should minimize the variation in column length. Otherwise, columns are filled sequentially and some columns may end up partially filled, or with no content at all. In any case, the user agent should try to honor the ‘widows’ and ‘orphans’ properties.
          7.1. ‘column-fill’
          Name: column-fill
          Value: auto | balance

Leave a Reply