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.