CSS sidebar with fixed width and fluid content

R3Tech picture R3Tech · May 5, 2015 · Viewed 12k times · Source

I'm trying to add a sidebar with a fixed width. But the content div should be fluid.

Here is my code:

I hope someone can help.

Answer

SKeurentjes picture SKeurentjes · May 5, 2015

Just move .page-side before .page-content in your html

.page-main{
    padding: 10px;
    height: auto;
    overflow: hidden;
}

.page-content{
    background-color: red;
    width: auto;
    overflow: hidden;
}

.page-side {
    float: right;
    width: 200px;
    background-color: green;
}
<div class="page-main">
  <div class="page-side">
    Sidebar
  </div>
  <div class="page-content">
    Content
  </div>                
</div>