Control fixed/fluid layouts with CSS

Recently I've been experimenting a lot with CSS, interfaces and I designed a website for local brand which contains fixed/fluid layouts. As I always find it a challenge to make something different than before, I managed to create a more complicated interface in two different methods using solely CSS and HTML.

thumb - 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

Creation of fixed/fluid layout using CSS: Method I

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.

Creation of fixed/fluid layout using CSS: Method II

Cheers

Illustration: Bogdan Maksimovic
Translation: Vasilije Perovic

Posted on 09 Dec 2010