Clever Geek Handbook

Fixed width CSS sidebar with fluid content

I am trying to add a fixed width sidebar. But the content of the div must 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>
Run codeHide result


I hope someone can help.

+3


source to share


4 answers


Just move .page-side

before .page-content

to 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>
Run codeHide result


+8


source


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 to the 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;
}
+2


source


Not sure if you want to increase the sidebar width to 200px, you can also assign the width as a percentage ... 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: https://jsfiddle.net/pjx6wqrw/3/

{edited to remove jsfiddle link from code block}

0


source


You can use negative stock.

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 description and example for 2-3 columns:

https://shellcreeper.com/responsive-fixed-width-sidebar-why-and-how/

0


source






More articles:


All Articles