CODEWITHSUNDEEP
htmlcss
Simon
Simon

Reputation: 10160

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?

Upvotes: 0

Views: 68

Answers (4)

Moran Neuhof
Moran Neuhof

Reputation: 446

If I understand you correctly, you can get it done by adding:

 height: 100vh;

to the #itemList and 

layout: fixed;

to the #sidePanel:

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

#itemList {
   margin-top: 10px;
   overflow: auto;
   background-color: green;
   height: 100vh;
}

Hope it helps.

Upvotes: 0

hdev
hdev

Reputation: 213

you have to set width for both divs other wise the div whose width doesn't fix will occupy 100% width Add following properties in your stylesheet

#itemList {
    width: calc(100% - 310px);
}
#sidePanel {
    background-color: #ff0000;
    float: right;
    padding-left: 10px;
    padding-right: 10px;
    position: fixed;
    right: 0;
    width: 300px;
}

Upvotes: 0

Richa
Richa

Reputation: 4270

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

Upvotes: 2

Mihai T
Mihai T

Reputation: 17697

i made a @media query so under 767px side-bar becomes fixed. also added a margin-right:300px to the main content, which is the width of the side-bar

also add box-sizing:border-box to #sidePanel so it has a 300px width not 320 ( because of the padding left and right of 10px )

see snippet below or fiddle > jsfiddle

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

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

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


@media only screen and (max-width: 767px) {
  #sidePanel { position:fixed;right:0}
  #itemList {margin-right:300px;}
}
<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>

Upvotes: 0

Related Questions