Our Blog

How to make columns which act the same way as table cells using only CSS?

There is a method to complete this task – make the columns the same height. It is one of the most popular tasks in html markup. There are several ways to solve it, but all they either provide only visual results (when columns seem to have the same height, but actually they don’t, the effect is a result of laying columns on a special background, this method is called faux columns) or require extra markup, or unusual markup (for example, when one block is included into another one and it is given position: absolute, top: 0, bottom: 0 and a shift to the required side) or these methods are realized to be very clever and not intuitively understandable css (for instance, padding-bottom: 32768px, margin-bottom: -32768px ).

But we have to make the columns act the same way as table cells – the block is stretched out by its width to fill in the empty space if its width is not specified.

Nevertheless, a new solution already exists!

After IE8 came out it becomes possible to work with columns in a way that is specified by the W3C – using display: table-cell properties!

It is an irreplaceable method for situations, when it is necessary to realize the following structure:

The column fills in the place available on the left side

The column of fixed width.

This is a standard markup – a container including two columns:
<div id="wrapper">
<div id="content">
…
</div>
<div id="sidebar">
…
</div>
</div>
Apply the styles to it:
#wrapper {display: table; table-layout: fixed; width: 100%; border-collapse: collapse; border-spacing: 0; margin: 0 auto;}
#content {display: table-cell; width: auto; vertical-align: top; padding-right: 38px; padding-left: 20px;}
#sidebar {display: table-cell; width: 290px; vertical-align: top; padding: 25px 20px 0 15px;}
Everything works perfectly in modern browsers such as – Firefox, Safari, Chrome, Opera and IE8. But what will you do with older versions IE – 6 and 7?

Expression can become a helpful solution anytime – this is a proprietary property of older IE versions (it is excluded in IE8), it allows the calculation of the values of css properties depending on different conditions. In fact, it is a small js built into css.

Thus, in order to realize the similarity of columns with the same height in older IE versions we have to take two blocks and place them one behind another calculating the width of a left cell. We can’t use absolute positioning to place them for the reason this will break webpage flow, that’s why we use float.

Thus:
#wrapper {display: block; zoom: 1}
#content {float: left; width: expression(wrapper.offsetWidth - 325 - 38 - 20 - 5 + 'px') }
#sidebar {float: right; }
A distinguishing feature of the expression is that it is used only if JavaScript is turned on. But, what do we do if a user has an older version of IE with js turned off? (This situation is not as uncommon as it may seem to be – the restriction on using JavaScript can be caused by the internal safety policy of a company). For such a case, it makes sense to specify an approximate width for this block, which the block would have with the standard extension 1024×768, and the next rule is to reassign it if JavaScript is turned on:
#wrapper {display: block; zoom: 1}
#content {float: left; width: 61%; width: expression(wrapper.offsetWidth - 325 - 38 - 20 - 5 + 'px'); margin-bottom: 75px;}
#sidebar {float: right; margin-bottom: 75px;}