Flexible Width but Fixed Sidebar

The calc() function that modern browsers support allows you to build more flexible layouts using a smaller amount of CSS. One particular example of this is the typical two column layout.

Without calc() we can easily create a two column layout with both columns having a fixed width or with both columns having a percentage width. Not so easy to have a layout where one column has a fixed width and the other fills the rest of the space.

Yes it was possible to create such a layout by floating the fixed width column and by providing a margin on the other but that would only work if the floated column was shorter than the other column. As soon as the variable width column becomes wide enough to be shorter than the fixed width column you start to lose the content at the bottom of the fixed width column. Now I have used this where the fixed width column contains advertising where the idea is to display as many ads down the side of the main content as will fit. In that instance it doesn't matter when that column gets chopped off as all it means is that those with a wider browser viewport see fewer ads.

Being able to display a two column layout where one column is fixed and the other is variable width but where the fixed width column doesn't get truncated if the other column is shorter was a more difficult task prior to the introduction of calc(). With calc() we can simply float both columns and use calc() on the variable width column to specify its width as being 100% less the width of the fixed width column and perhaps a little more for a gutter in between.

Examples

.var {
width: calc(100% - 12em);
float: left;
}
.fixd {
width: 10em;
float: right;
}

Limitations

The only problem with this is when someone visits using an older browser that doesn't recognise calc(). These older browsers are unable to apply a width to the variable width content and so are unable to float it and so the page layout gets messed up for those visitors as what should be in the one column ends up displaying below the content from the other column.

While we can't give these visitors one fixed and one variable width column without a major rework of the CSS and the introduction of the problem mentioned earlier for all visitors to the page, we can make a very small amendment to our CSS that will give them two variable width columns. To do this we simply specify a second width entry before the one tat uses calc() to give our column a percentage width. We do the same with the fixed width column giving it a percentage width as well so that it will fit when the space is too small for our preferred fixed width. All that remains then is to ensure that the fixed width is only used when the calc() is recognised for defining the variable width column and to do that we simply wrap our fixed with value inside its own calc() call.

.var {
width: 80%;
width: calc(100% - 12em);
float: left;
}
.fix {
width: 18%;
width: calc(10em);
float: right;
}

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate