CSS – fluid vs. fixed Design

gernot — Wed, 25 Jan 2006 19:21:48 +0000

Everyone knows the problem: Webpages which have too much text on too small space or vica versa. The solution is either make the page fluid or fixed, and with the help of css this is pretty simple:

fixed

body {
    margin: 0;
    padding: 0;
    background-color: #000;
    color: #fff;
}
#page {
    margin: 0 auto;
    padding: 0;
    width: 760px;
    background: #fff;
}

click here for example Here the page never changes its size.
Try and change the size of the browser window.

fluid

body {
    margin: 0;
    padding: 0;
    background-color: #000;
    color: #fff;
}
#page {
    margin: auto;
    padding: 0;
    width: 90%;
    background: #fff;
}

click here for example Here the page always changes its size to fit to the resolution or browser window
Try and change the size of the browser window.

gego.info » webstandards

CSS – fluid vs. fixed Design

fixed

fluid