2 Column Layout (1 Fixed, 1 Flexed) 5 different ways!

A very common UI pattern uses a fixed width column and a flexible width column for website layout. But how can this be achieved easily? I patrol StackOverflow everyday and its a question that crops up now and again so here I’m going to detail 5 different ways to achieve the exact same layout but it’s up to you to decide which one works best for your implementation!

Layout 1: Widths, Floats and Margins

In the following example we use a floated .fixedColumn element which has a fixed width of 200px. The float causes the element immediately after it .flexibleColumn to be drawn up next to it. Unfortunately by default the left edge of the .flexibleColumn sits underneath that of the .fixedColumn. We can overcome this by specifying that the .flexibleColumn has a left margin that is the same as the width of the .fixedColumn. See the example below.

Example

1

Browser Support

This solution will work in all browsers.


 

Layout 2: Floats and Calc()

In this example we float both columns to the left but this time the .flexibleColumn uses a percentage width of 100%. Ordinarily this would not work but using the amazing calc() function, we can set our width to be 100% of the page width minus the width of the .fixedColumn like this:

width: calc(100% - 200px);

Example

1

Browser Support

Lacks support in older browsers but is supported by all major browsers (IE9+) apart from Opera Mini. See CanIUse for more information.


Layout 3: display as a table

In this example we’re going to change the display properties of both columns to emulate the old days of laying out content with tables. First we set the parent to be 100% width and set its display property to table:

display: table;
width: 100%;

Next we shall change both columns to display as a table cell:

display: table-cell;

Now we can set a fixed width on .fixedColumn and the .flexibleColumn will expand to fill the remaining space.

EXAMPLE

1

BROWSER SUPPORT

This solution will work in all browsers from IE8+. See CanIUse for more information.


Layout 4: flexbox

You would literally have to have been living under a rock to have not heard of the introduction of flexbox in the CSS3 specification. In this example we use the super-powerful flexbox to flow our structure into place.
We do this by first setting the parent of the two columns to having a display property of flex which makes it the flex container:

display: flex;

After doing that the two columns now sit beside each other and become flex items. Then we apply the 200px width to .fixedColumn. We now need to add a couple of flex item properties to .flexibleColumn to make it span the rest of the gap.

flex: 1;

The represents the flex-grow property which is a unitless proportional value which means if all items are set to 1 then they will all be equal sizes, but in this case it basically means expand to fill the left over space.

EXAMPLE

1

BROWSER SUPPORT

This solution will work in a surprising number of browsers from IE10+. See CanIUse for more information.


Layout 5: Grid

The elusive CSS3 Grid; the holy grail of layout controls, this set of properties makes layout work a breeze! It’s downside, it only works in IE10+ and Edge, but we’re not going to let that put us off so here it is (with the microsoft vendor prefix).
First we must change the column’s parent display property to be a grid and define how many rows and columns the grid will have at their potential sizes:

 display: -ms-grid;
-ms-grid-columns: 200px 1fr;
-ms-grid-row: auto;

So what’s going on here? We’re setting the display property to grid. We then define two columns, the first as 200px the second we set to 1 fractional unit (fr). This is the same as saying “all the remaining space”. We then define how many rows we need which in this case is just 1 and we set that to be auto or basically “fit to content”.

Next, we need to define which elements are which columns/rows. First we will set .fixedColumn to be column 1:

-ms-grid-column: 1;

Next, we set the .flexibleColumn to be column 2:

-ms-grid-column: 2;

How easy was that?!

EXAMPLE

1

BROWSER SUPPORT

This solution will work in IE10+ and Edge only. See CanIUse for more information.


 

And that’s it. 5 different ways of doing the same thing. I love the CSS3 grid and use them for development WinJS applications but hopefully this gives you some food for thought.

Leave a Reply

Your email address will not be published. Required fields are marked *