CODEWITHSUNDEEP
htmlcss
luke
luke

Reputation: 3599

Two column template with static and responsive width

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

Problem

Let's have a quick look on the problem - we need to create a two column layout stretched to the entire width of page where one of the column has a constant width.

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

Solution 1 - 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 (http://caniuse.com/#search=calc) and it is recommended to use fallbacks (http://html5please.com/#calc).

Solution 2 - 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 another solution uses table that has table-layout property set to fixed. It enables us to set the width of any column. I've modified the HTML structure, but it can also be achieved by manipulating with display property... (ugly example: FIDDLE)

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

Regards.

EDIT

Thank you all for your contribution!
I agree that the problem I shown was too simple :)
You can find a further discussion on that issue here.

Upvotes: 2

Views: 927

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206636

my 2¢ and Three ways to do it:

jsBin demo (Aside left) & jsBin demo (Aside right)

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


There's even a totally banal solution. 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's another smarter solution (applicable also to even more columns layout)
and that's doing it like table does:
jsBin demo

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

Upvotes: 2

Christina
Christina

Reputation: 34642

That is the simplest thing to do with normal, legacy (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's 100% */
    background: yellow;
    padding-left: 200px;
    position: relative;
}

Upvotes: 3

Anonymous
Anonymous

Reputation: 10216

You could also do it by using float and overflow like this:

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>

Upvotes: 2

Related Questions