Control fixed/fluid layouts with CSS

Creation of fixed/fluid layout using CSS: Method I

As a starting point, I’ve chosen the relative height and width (width:100%; height:100%;) and I created a small example as a reminder what these values inherit, how they sum up, as well as how they can be positioned. The whole "catch" is in the height, so that <div id="container"> inherits the the height (height:100%;) from the body tag. Take a look at Demo 1 and change the window dimensions.

Margin Collapsing

Some rules don't apply linearly to the height and width. For example, if we take that the sum of the inner elements of the relative width is equal to the relative width of the parent element (yup, I admit, this is easier to code than write), this won’t apply to the height. Demo 2

Layout realization

First, take a look at Opacic Shoes website. I wanted to make layout which would look fine on different resolutions and avoid empty space on higher resolutions giving the header and footer width:100%;. The following example is based on the inheritance of height 100% of the body tag, and "bypassing" collapsing margins. Demo 3

So I made layout with fluid divisions such as header and footer, they have relative width and fixed height #container division has fixed width and relative height because I wanted to make layers for jQuery Cycle plugin, in order to put in separated HTML elements and made layer transition.

Creation of fixed/fluid layout using CSS: Method II

Same result I got on totally different way. I "stretched coordinates" in order to get working layer area. To see how it works sneak peak source Demo 4 , take a look at image . This method is more elegant with less calculation and require additional hack for IE6. Besides, I'm avoiding IE6 whatever I can.

Cheers

Illustration: Bogdan Maksimovic
Translation: Vasilije Perovic