CSS sidebar with fixed width and fluid content - html

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;
}

Answer 3

You can use negative margin.
HTML:
<div class="wrapper">
<div class="content">
</div><!-- .content -->
<div class="sidebar">
</div><!-- .sidebar -->
</div><!-- .wrapper -->
CSS:
.wrapper{
margin-right: 300px;
}
.content{
width: 100%;
float: left;
}
.sidebar{
float: right;
width: 300px;
margin-right: 300px;
}
full explanation and example for 2-3 columns layout:
https://shellcreeper.com/responsive-fixed-width-sidebar-why-and-how/

Answer 4

not sure whether you want to your sidebar width to exact 200px you can assign width in percentage too... i hope this helps
<div class="page-main">
<div class="page-content">
Content
</div>
<div class="page-side">
Sidebar
</div>
</div>
.page-main{
padding: 10px;
height: auto;
overflow: hidden;
}
.page-content{
background-color: red;
width: auto;
overflow: hidden;
float:left;
width: 61%;
}
.page-side {
float: right;
width: 200px;
background-color: green;
}
OR check this out: https://jsfiddle.net/pjx6wqrw/3/
{edited to remove jsfiddle link from the code block}