responsive content with fixed size sidebar

Navigation
0

Is it possible to make a layout with flexible width content and a fixed size sidebar? Example 

    <body>
      <header></header>
       <article></article>
       <aside></aside>
    </body>

I want to leave body with 100% width, aside always with 300px and article should take the difference regardless of the size / resolution of who is accessing. And preferably only with css, without javascript.

Ps. case relevant, I am considering this example, but wanted to leave the fixed size bar link

Thanks in advance for your attention

    
asked by anonymous 01.01.2016 / 22:20

2 answers

1

One way to do this is in your example, by reversing the order of the elements article and aside .

When% w / o% in code is written before% w / o%, a% w / o is given, and the desired width is given. However, aside is assigned a article and a float: right that can be equal to or greater than article of width: 100% . Thus, one has a fixed width the other occupies the rest of the screen.

Example 

   aside {
 float: right;
 width: 300px;
 background: blue;
 height: 100px;
}

article {
 margin-right: 300px;
 background: gray;
 height: 200px;
}
<aside>
  Aside
</aside>
<article>
  Article
</article>

JsFiddle

    
01.01.2016 / 23:18
2

article {with: calc (100% - 300px); position: relative; }

aside {width: 300px; height: 100%; position: fixed; top: 0; bottom: 0; left: 0; }

If you want the right side aside and change the left by right: 0.

    
02.01.2016 / 23:58
How to query data from a table using INNER JOIN in a subquery in PHP Error fetching page data with AJAX