A c t i o n f o r L i b r a r i e s — F e b r u a r y 2 0 0 3

The Internet Connection

By Michael Sauers

More Two-column CSS Fun
Last year, some "The Internet Connection" columns focused on how to create a two- column Web page layout using cascading style sheets (CSS) instead of tables. In those articles the examples given created two columns with flexible widths. What if, as a Web page author, you would instead like to set the width of one column to a specific size, while leaving the other column width flexible? Here's how to do that with CSS.

Content moves under the menu. For example, on my personal home page I have two columns, the menu on the left and the content on the right. If you resize your browser's window, you will quickly notice that the menu retains a constant width, while the content adjusts to fill the rest of the window.

What you cannot do to accomplish this is set the width of the menu column to npx and the width of the content column to a percentage like so:

.menu {float: left; width: 150px}
.content {float: right; width: 70%}

Although this may seem a logical solution, a problem arises when the screen gets too small; the content moves itself under the menu as shown at right:

Columns aligned correctly. Here is the CSS code that will accomplish the design we want and still work in both Netscape and Internet Explorer browsers (with windows of whatever size):

.menu {float: left; width: 150px}
.content {margin-left: 170px}

In this example, we have still directed the menu to float to the left of the window and established its width of 150 pixels. However, the key here is what we have not directed the content to do. By not floating the content to the right or setting a column width, we overcome the problem of the content's moving below the menu. By not giving this information, the browser treats the content as if the width is 100 percent of the screen. Then, by giving the content a left margin of 20 pixels more than the width of the menu, the content appears 20 pixels to the right of the menu and seems to float to the right.

Next Article | Previous Article | Table of Contents | BCR Publications