Responsive content with fixed size sidebar

Asked

Viewed 408 times

0

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

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

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

Ps. relevant case, I am considering this example, but wanted to leave the slider fixed size http://wpmidia.com.br/desenvolvimento-web/design-responsivo-em-3-passos/

Thanks for your attention

css html5 css3 responsive-layout media-queries

2 answers

2

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

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

If you want to put the aside on the right hand hand hand hand, exchange the left for the right: 0.

1


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

To the aside which in the code is written before the article, a float: right, and the desired width is given. The article a width: 100% and a margin which may be equal to or greater than width of aside. So 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

Browser other questions tagged css html5 css3 responsive-layout media-queries

You are not signed in. Login or sign up in order to post.