5

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 :)

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

Problem

Let's have a quick look on the problem - we need to create a three column layout stretched to the entire width of page where one of the column has a constant width and each remaining column fills out 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 have to achieve following layout without modifying HTML structure, contents of <article> and <aside> may be changed. Only pure CSS solutions will be accepted.

example

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

It is probably the most supported solution (read more).

Solution 2 - 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 (read more) and it is recommended to use fallbacks (read more).

Solution 3 - Flexible flexbox

Example: FIDDLE

This is probably the future of responsive web design. I've implemented desired layout in an instant. Flexbox offers a lot of interesting features (read more).

You can read here about the compatibility.

Solution 4 - Margin manipulation and absolute positioning

Example: FIDDLE

This is another well supported solution. Absolute position is applied to the static aside element, section has appropriate right margin, 50% width is added for both article elements.

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. Any thoughts on that will be appreciated.

Footnotes

Try to shrink fiddle's preview pane to the minimal width - in my opinion good, worthy tables still behaves most predictably ;)

Regards.

Community
  • 1
  • 1
luke
  • 3,531
  • 1
  • 26
  • 46
  • This question appears to be off-topic because it is about collecting alternative options for working solutions. – bummi Oct 01 '14 at 21:42

2 Answers2

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.

Community
  • 1
  • 1
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • It works only because I've added the same sample text for both articles:) The problem of the 'default' table was already described in first solution. – luke Sep 24 '14 at 07:02
  • @luke :) you're right! Fixed by just adding the forgotten `table-layout: fixed;` :) – Roko C. Buljan Sep 24 '14 at 07:32
  • That's exactly the first solution. The only difference is that you didn't use table-row display for section. It seems to be unnecessary here:) – luke Sep 24 '14 at 07:37
  • @luke... sh*t I've really missed that one from your long question... Any way. That's the way I'd go with. And in a 2Y from now I'd completely switch to `calc()` without worrying about xB comp. – Roko C. Buljan Sep 24 '14 at 07:41
  • @luke ok so basically I really believe (as of today) there's no better/simpler way to do it. – Roko C. Buljan Sep 24 '14 at 07:54
  • As you can see there is another solution :) – luke Sep 24 '14 at 12:22
  • @luke It's the exact same solution I already described here: http://stackoverflow.com/questions/25983894/two-column-template-with-static-and-responsive-width and put already in the Answer under "See also:" section. The reason I've put it under the See also is cause logically it requires a slightly modified HTML markup. It should not be hard to modify it to our needs by simply nesting elements in the flexible element of the two-column version I've posted. Don't you think? – Roko C. Buljan Sep 24 '14 at 14:07
  • Yes, I agree that's almost the same for the last solution. You first came up with this idea +1 – luke Sep 24 '14 at 18:34
0

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.

John_C
  • 1,116
  • 8
  • 17