Two-column model with static and sensitive width

advertisements

Sometimes we need to combine percentage and fixed values for dimension calculation especially when it comes to create some responsive layouts. As far as I'm concerned I've found only two ways to achieve the desired effect in pure CSS.

Problem

Let's have a quick look on the problem - we need to create a two column layout stretched to the entire width of page where one of the column has a constant width.

<section>
  <article>I fill out all the available space!</article>
  <aside>I'm 50px width!</aside>
</section>

Solution 1 - Making use of calc() function

Example: FIDDLE

The calc() function enables us to combine percentage and fixed values, for example:

article {
  width: calc(100% - 50px);
}

Unfortunately this is not cross browser solution (http://caniuse.com/#search=calc) and it is recommended to use fallbacks (http://html5please.com/#calc).

Solution 2 - Cross-browser fixed layout table

Example: FIDDLE

The width of each column in default table is calculated automatically and depends on the content of cells. In order to resolve the problem we need to force the size of the column, so another solution uses table that has table-layout property set to fixed. It enables us to set the width of any column. I've modified the HTML structure, but it can also be achieved by manipulating with display property... (ugly example: FIDDLE)

Summary

That's a very common problem in responsive world and I am very curious if there is any other ideas how to resolve it in pure CSS and HTML. Any thoughts on that will be appreciated.

Regards.

EDIT

Thank you all for your contribution!
I agree that the problem I shown was too simple :)
You can find a further discussion on that issue here.


my 2ยข and Three ways to do it:

jsBin demo (Aside left) & jsBin demo (Aside right)

article {
  margin-right: 150px;
}
aside {
  width: 150px;
  position:absolute;
  right:0; top:0;
}

There's even a totally banal solution. You can use this simple trick:
jsBin demo and make body act as article.

body, html {
    height: 100%;
}
aside {
    float: left;
    min-height: 100%;
    width: 150px;
}

There's another smarter solution (applicable also to even more columns layout)
and that's doing it like table does:
jsBin demo

section {
  display: table;
  table-layout: fixed;
  width: 100%;
}
article, aside{
  display: table-cell;
}
aside {
  width: 150px;
}