Two column patterns with static and sensitive width

Question

Sometimes we need to combine percentages and fixed values ​​to calculate sizes, especially when it comes to creating some flexible layouts. As far as I know, I found only two ways to achieve the desired effect in pure CSS.

Problem

Let’s take a quick look at the problem - we need to create a two-column layout, stretched to the entire width of the page, where one of the columns has a constant width.

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

Solution 1 - Using calc ()

Example: FIDDLE

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

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

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

Solution 2 - fixed layout table for browser

Example: FIDDLE

The width of each column in the table is automatically calculated by default and depends on the contents of the cells. To solve the problem, we need to force the size of the column, so another solution uses a table with the table-layout property set to fixed . It allows you to set the width of any column. I changed the HTML structure, but it can also be achieved by manipulating with the display property ... (ugly example: FIDDLE )

Summary

This is a very common problem in a responsive world, and I am very curious if there are any other ideas on how to resolve it in pure CSS and HTML. Any thoughts on this would be appreciated.

Sincerely.

EDIT

Thank you all for your input! I agree that the problem I showed was too simple :)
You can find further discussion of this subject here .

Answer 1

my 2 ¢ and Three ways to do this:

jsBin demo (left) & jsBin demo (right)

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

There is even an absolutely banal decision . 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 is an even smarter solution ( applies to even more columns )

and what does it do like table does:
jsBin daemon

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

Answer 2

This is the easiest thing for normal, old (back to ie8) support.

http://jsbin.com/moveqe/1

HTML

  <aside>Fixed width </aside> <section>Rest of page </section> 

CSS

 body, html { margin: 0; padding: 0; height: 100%; } aside, section { box-sizing: border-box; float: left; min-height: 100%; } aside { background: pink; width: 200px; margin-right: -200px; position: relative; z-index: 1; } section { width: 100%; /* this does not have to be set if it 100% */ background: yellow; padding-left: 200px; position: relative; } 

Answer 3

You can also do this using float and overflow as follows:

JSFiddle - DEMO

 article, aside { padding: 5px; } article { overflow: hidden; background: #cee; } aside { width: 50px; background: #ece; float:right; } section { padding: 25px; background: #eee; overflow: hidden; } * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } 

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