Scrolling only content div, others should be fixed

overflow: auto; adds the scroll when need #header{ width: 100%; height: 139px; background-image: url(‘images/Header_grey.gif’); overflow: hidden; /* code added to prevent scroll */ } #left_side{ width: 210px; height: 700px; background-image: url(‘images/Left_side.gif’); background-repeat:repeat-y; overflow:hidden; /* code added to prevent scroll */ position:absolute; font-size: 16px; } #content{ height: auto; padding: 20px; margin-left: 230px; margin-right: 20px; padding-bottom: 30px; …

Read more

How can I get overlapping divs with relative positions?

Wrap an absolute positioned div with a relative positioned div: .container { position: relative; width: 200px; height: 100px; top: 100px; background: yellow } .one { z-index: 1; position: absolute; width: 100px; height: 20px; background: red; } .two { z-index: 2; position: absolute; width: 100px; height: 20px; background: blue; left: 10px; top: 10px; } <div class=”container”> …

Read more

CSS absolute centering

You can reduce the css to this: .absolute-center { position:absolute; width: 500px; height: 100px; margin: auto; top: 0; bottom: 0; right: 0; left: 0; border: solid 1px red; } <p class=”absolute-center”>What is this sorcery?</p> The absolute element with properties like bottom: 0; top: 0; left: 0; right: 0; will fill all the space. So, whats …

Read more