jj kk jj kk - 1 year ago 73
CSS Question

right side of fixed div overflow its parent

I am trying to put a

div inside an another div. I want a fixed div which has a
so it will be great for mobile and desktop at the same time.

Here is my JSfiddle

SF wants some code:

<div id="container">
<div id="item">This div is good div</div>
<div id="fixed">Right side of this div overflow its parent!!! </div>

Answer Source

You can use the calc() method to adapt the viewport size. Just subtract right and left margin from the 100%:

Edit: I added a min-height to the body to see the "fixed-effect" on scrolling

body {
  margin: 0;
  min-height: 1000px;
#container {
  margin: 10px;
  background: black;
  color: white;
#item {
  height: 50px;
  width: 100%;
#item {
  background: blue;
#fixed {
  height: 50px;
  width: calc(100% - 20px);
  background: green;
  position: fixed;
<div id="container">
  <div id="item">Normal div</div>
  <div id="fixed">Fixed div</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download