CSS create multiple columns with high column layout

css| Create

The most frequently asked questions about my personal site are:

How do you get the background color of the right side of the column to extend downward?

This is really a very simple question, perhaps you are already quite familiar with, but many people do not know. The technique described below is a handy little trick that will help you solve this headache problem.

Vertical Stretch

CSS has some of the most frustrating features, such as the fact that the element is stretched vertically to the length it really needs. In other words, if you put a 200-pixel high picture in a <div>, this <div> will only stretch to 200 pixels high.

When you use <div> to separate your tags (translator, refers to the structured creation of XHTML code), and then apply CSS to create a layout of the columns, things will become interesting and dilemma. One of the columns may be longer than the other (Figure 1). Because the column height depends on the amount of content contained within the column, creating a column layout with the same height as the two columns but with different colors becomes difficult.

Figure 1

There are some ways to make the vertical bars look the same length vertically, regardless of what they contain. Here to share my own solution (with the use of an absolutely positioned layout), this is a very very ... Simple method. The same technique is also used elsewhere, including a List Apart (the translator, Ala is currently not using this method, may have been revised, the same below).

Trick

The secret of the whole scheme is actually very simple, with a vertical tiled background picture to create a shaded image of the column. For example, Simplebits (the author's website, translator), I created a background picture like Figure 2. On the far left is a decorative pattern with a wide white area on the right (for the content bar), followed by a one-pixel border, followed by a light brown background (for the sidebar), and a decorative pattern on the far right, which is the horizontal flip of the leftmost decorative pattern.

Figure 2

The entire picture is only a few pixels high, but when it is tiled vertically, it creates a shaded compartment structure that stretches to the bottom of the page-regardless of the length of the content in the column.

Css

This basic CSS rule will be added to the BODY element.

Background: #ccc URL (bg_birch_800.gif) repeat-y 50% 0;

Essentially, we set the background of the entire page to gray and only tile the background picture (repeat-y) vertically. "50% 0" sets the position of the background image--in this case, from the left 50% of the browser (centering the picture) and tiling from the top 0 pixels.

Column positioning

After you put the background picture in place, position the vertical bar to the top, and the left and back sidebar have their own internal and external patches, make sure they stay in the right place--within the false vertical bar created by the background picture (Figure 3).

Figure 3

Another important thing to mention is that if any of the vertical bars have borders, patches, and patches, we need to do some remedial work on the Ie/win box model bug, please refer to Tantek Celik box models hack or mid pass Filter.

As a choice, if border and padding can be avoided at the same time and only use margin, then box Model hack unnecessary. If the contents of the column are simply positioned at the top of the page (and are transparent), you can also simply avoid box Model Hack.

Whatever it is that floats your boat

On my own site, I use absolute positioning to create two-column layouts, but if you use the Float property to create it, you get the same good results (like ALA).

Both situations use the same way of thinking: tile the background picture, and then float the vertical bar to the right place to cover the fake background bar (faux-column).

Conclusion

This is a very simple concept, but it can help ease the pain that many designers often encounter when creating CSS based layouts.

Thank Jeffrey Zeldman help refine this article.