A study of creating grids that combine percent and static (e.g. pixel) values ​​in CSS

Question

I just want to do a study that deals with responsive web design. Do not consider this issue as a problem that needs to be resolved. This is just an experiment :)

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 four ways to achieve the desired effect in pure CSS.

Problem

Let's take a quick look at the problem - we need to create a three-column layout that spans the entire width of the page, where one of the columns has a constant width, and each remaining column fills half of the available space.

<main> <section> <article class="first"> I fill out half of the available space! </article> <article class="second"> I fill out half of the available space! <strong>Be aware that contents of article and aside may be changed!</strong> </article> <aside> I'm 50px width! </aside> </section> </main> 

We need to perform the following layout without changing the structure of HTML, the contents of <article> and <aside> can be changed . Only pure CSS decisions will be made.

Solution 1 - 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 this solution uses a table with the table-layout property set to fixed . It allows you to set the width of any column.

This is probably the most supported solution ( read on ).

Solution 2 - Using calc ()

Example: FIDDLE

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

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

Unfortunately, this is not a cross-browser solution ( read more ), and it is recommended to use backups ( read more ).

Solution 3 - flexible flexbox

Example: FIDDLE

This is probably the future of responsive web design. I completed the desired layout in an instant. Flexbox offers many cool features ( read on ).

You can read about compatibility here .

Solution 4 - Margin Manipulation and Absolute Positioning

Example: FIDDLE

This is another well-supported solution. The absolute position applies to the static aside element, section has the corresponding right edge, 50% width is added for both article elements.

Summary

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

Footnotes

Try to reduce the preview area of ​​the script to the minimum width - in my opinion, good, decent tables still behave most predictably;)

Sincerely.

Answer 1

( Edit: this is similar (/ simplified) to OP Solution 1 and AFAIK, it covered all the most popular solutions in the wild. Recall that this method is neat to make it cross-browser compatible)

jsBin demo

... will just mimic the way table

and prevent stretching with table-layout: fixed; :

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

See also: Two column patterns with static and flexible width

NOTE! Do not forget that you can insert elements inside the two-rack version or other versions to create different options.

Answer 2

I violated your conditions a bit by putting two articles in the container element ".left", but this is the technique that I usually use. Give aside a fixed width and give sensitive content the right to fill the same amount so that they do not 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 main rendering tree is on the side, so if the side has more main content, it will not click on the following elements on the page.