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>

Answer 2

1.you can use css expression

.page-content {width: calc(100% - 200px);float:left}

2.or you can set the sidebar to absolute,and add margin-right for page-content

.page-side {
    width: 200px;
    background-color: green;
    position: absolute;
    right: 20px;
    top: 18px;
}
.page-content {
    background-color: red;
    width: auto;
    overflow: hidden;
    margin-right: 200px;
}