Simon Simon - 3 months ago 11
CSS Question

CSS content div fills screen width with floating sidebar

I have a 2 column layout set where the left column is the main content holder, and the right column functions as a sidebar. I want the sidebar to be a fixed size in pixels, and the main content to adjust depending on window size: https://jsfiddle.net/n0y408m2/



#itemList {
margin-top: 10px;
overflow: hidden;
background-color: green;
}

#sidePanel {
background-color: red;
float: right;
width: 300px;
padding-left: 10px;
padding-right: 10px;
}

#buttonContainer {
width: 100%;
padding-top: 20px;
}

#buttonContainer button {
display: block;
width: 70%;
margin: 0 auto 20px;
}

#infoContainer {
background-color: #d3e2eb;
width: 90%;
margin: 0 auto;
border: 1px solid black;
border-radius: 5px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div id="sidePanel">
<div id="buttonContainer">
<button type="button" class="btn btn-success btn-md">Add Item</button>
<button type="button" class="btn btn-danger btn-md" disabled>Delete Item</button>
<button type="button" class="btn btn-primary btn-md" disabled>Edit Item</button>
</div>
<div id="infoContainer">
<h4 class="text-center">Information</h4>
</div>
</div>

<div id="itemList">
<h3>Main content</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>





I want to make it so that if the main content gets too long, scroll bars will show, and the sidebar will become fixed and scroll with the page so it always stays in the same location

I can achieve this by setting
position:fixed; right:0
on the sidebar. But now the main content fills 100% of the screen width when it should still be flush with the left edge of the side bar

I guess the layout now no longer knows about the fixed px width of the sidebar. Whats the best way to fix this?

Era Era
Answer

As you already added float right to your side-panel, giving margin-right will fix your problem.

This will work for you demo

    #itemList {
      margin-top: 10px;
      overflow: hidden;
      background-color: green;
      margin-right: 315px;
    }

    #sidePanel {
      background-color: red;
      float: right;
      width: 300px;
      padding-left: 10px;
      padding-right: 10px;
      position: fixed;
      right: 0;
    }

    #buttonContainer {
      width: 100%;
      padding-top: 20px;
    }

    #buttonContainer button {
      display: block;
      width: 70%;
      margin: 0 auto 20px;
    }

    #infoContainer {
      background-color: #d3e2eb;
      width: 90%;
      margin: 0 auto;
      border: 1px solid black;
      border-radius: 5px;
    }


  [1]: https://jsfid
Comments