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.
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.
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
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.
Illustration: Bogdan Maksimovic
Translation: Vasilije Perovic