CSS sidebar with fixed width and fluid content

Question

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

Here is my code:

.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-content">
                    Content

                </div>
                <div class="page-side">
                    Sidebar
                </div>
            </div>

I hope someone can help.

Answer 1

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>