2-columns layout: Fixed and Fluid

A problem I’ve often faced with during my projects is the creation of a 2-columns fixed-fluid layout. The first column has a fixed width, while the second column covers the remaining space into actual window size. This may be an issue when, for example, you are building website headers with the fixed-width logo and the navigation menu filling the remaining space.

Table display

A first solution is to create a container for the 2 columns displayed as a table, and display the 2 columns as table cells. This solution offers a good flexibility, because if we want to display the fixed column on the right, we can simply swap the columns in html. It also has the advantage to keep both columns to the same height regardless the width of the container. Unfortunately, it forces us to specify the width of the fixed column (otherwise columns have both 50% width and spread equally into container) and it’s not very semantic.

2-columns layout (table left)
2-columns layout (table right)

Position absolute

Another solution may be the use of absolute positioning. We create a container with relative positioning and display columns with absolute positioning.  We must define the width of the fixed column and a margin for fluid column. This solution offers the ability to swap columns via CSS without affecting HTML (see both solutions below, which share the same HTML code and differ only by css). Unfortunately, the trick does not keep both columns to the same height.

2-columns layout (position absolute left)
2-columns layout (position absolute right)

CSS calc function

A further solution is the use of CSS calc function. Thanks to this feature, available in all modern browsers, we can calculate the fluid width as the difference between container and fixed width. This trick allows to swap columns simply exchanging their CSS width properties or HTML id properties. Unfortunately, there are no IE8 fallbacks and column heights are different. Please also note that in this snippets we must avoid white spaces between HTML column elements, otherwise a 4px margin is displayed and we must keep it in count in calc values.

2-columns layout (CSS calc left)
2-columns layout (CSS calc right)

Floating div

The last solution is to specify the floating property for the fixed column and a margin for the fluid column. As for the absolute positioning, it is possible to swap columns via CSS without affecting HTML (see solutions below, with fixed column positioned on the left and on the right of container, respectively). Unfortunately, it’s not possible to keep columns to the same height and it’s necessary to specify the overflow property for container in css.

2-columns layout (float left)
2-columns layout (float right)

Conclusions

In this article, four possible solutions were presented to create a fixed-fluid column layout. For each solution, pros and cons were considered and analyzed. I hope this tricks may help you. If you have any doubt or if you like to propose better solutions, feel free to do it: comments are here for you!

 

Giorgio Bongiorni

Telecommunication Engineer with more than 5 years experience in web development and SEO campaigns. Favourite languages are HTML5, PHP5, MySql, CSS3 and jQuery.

Latest posts by Giorgio Bongiorni (see all)