Research on creating grids that combine percentage and static (e.g. pixel) values in CSS

Question

I just want to make a research that concerns responsive web design. Don\'t treat this question like a problem that must be solved. It\'s just an experiment :)

Sometim

Answer 1

I broke your conditions slightly by putting the two articles into a container element '.left' but this is the technique I usually use. Give the aside a fixed width and give the responsive content a padding-right of the same amount so that they don't overlap.

http://jsfiddle.net/John_C/fhvp3pod/

.left{
    padding-right:50px;
}
aside{
    position:absolute;
    top:0;
    right:0;
    width:50px;
}

The main disadvantage of this method is that the aside is outside the main rendering tree so, if the aside is longer than the main content, it won't push down the page following elements.

Answer 2

(Edit: this one is similar (/simplified) to the OP's Solution 1 and AFAIK he covered all of the most popular solutions out in the wild. To recap, this one is a neat way to make it cross-browser compatible)

jsBin demo

...would be to simply mimic the way table does it,
and prevent stretches using table-layout: fixed;:

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

See also: Two column template with static and responsive width

NOTE! Don't forget you can nest elements inside the two-column version or other versions to create different variants.