Search code examples
cssresizesidebarscreen-resolution

Right sidebar overlaps content page with browser resize

I need help in fixing my right sidebar in Wordpress so that it doesn't move around when seen in different resolution sizes on the screen?

CSS for the right sidebar

#socialsidebar { 
   float: right; 
   position: relative; 
   overflow: hidden; 
   margin-right: 200px; 
   margin-top: 200px; 
   height: auto; 
   width: 194px; 
}

CSS for the container/page

body { 
   min-width: 960px; 
}
.container_12 { 
   background: #fdfdfd; 
   margin-left: auto; 
   margin-right: auto; 
   width: 960px; 
}
Solution

  • You need to learn about position property of CSS.

    there are few thumb rules that you have to take care of.

    1. avoid unnecessary horizontal scroll.
    2. try not to give static height, cause you always have infinite height at your disposal. use height:auto for your bigger containers.
    3. give static dimensions to such containers which you know can be accommodated on most of the resolutions.
    4. avoid inline css - try to define generic css as much as possible.
    5. decide the possible resolution range of your app usage. and then begin writing CSS.
    6. and most importantly, always cross verify your CSS(as you write it) on IE(biggest challenge).

    most of the time, best way to go about it is that it should be simple and easily modifiable.

    see you need to look at the entire screen as a co-ordinate system whose origin is at top-left corner and Y-Axis downwards.

    this is one of the best articles on CSS-Position property. Go through it. It will help you in understanding how left,right,top,bottom work.

    now, I've made a super simple sample, covering your needs. i.e. right navigation and it stays stable in any resolution.

    Sample-fiddle

    what you should notice in this sample is, extensive usage of percentage for width, height, top, left. and position attribute.

    you can modify it accordingly. or take a reference from it. one more thing, you don't need to do position:absolute, I am doing it cause, i wanted to provide dimension to the container through its top, left,right bottom attribute, you can do it through percentage and position:relative.