Question

what do I have to put in my css to have that my site works like facebook for example. When you’re in facebbok and you resize the window of your browser, the size of the contents remains the same and there is the scrollbar on the bottom. I’ve used percentage to set widths but I don’t like very much the output.

my css is this.

#html {

height:100%;
overflow: scroll;
}

#body {
min-width: 1024px;
height: 100%;
}

#container {
margin-top: 0px;
width: 100%;
height: 100%;
}
#bloccoCentrale {
margin-top: 0px;
margin-left: 5%;
margin-right: 5%;
min-width: 80%;
height: 100%;
}

#centro {
margin-bottom: 10px;
min-height:930px;
}

the page is composed like this image.
http://img846.imageshack.us/img846/109/immaginejjr.png
thanks. I know that is lot confusing!!!

EDIT
with my css this is what happens when I resize the window!
http://img850.imageshack.us/img850/2197/cattura2wq.png

Answer 1

If you are trying to make a 100% width container, and trying for a fluid layout, use @media queries for specific screen resolutions..it’s called responsive designing

Say for example

@media all and (max-width: 1000px) and (min-width: 600px) {
  /*Style goes here*/
}

You can target specific screen resolutions by defining styles in related resolution media queries, here’s a good reference article to get started with CSS @media queries