Simple Fluid/Liquid Layout in CSS
I’m always frustrated with CSS, not because of syntax or construction… but the inconsistencies of rendering engines. Fluidity is important to me, my page should have the same look no matter how you resize your browser window. Creating fluid/liquid layouts isn’t as hard as I thought it would be.
Step 1:
Draw a general layout of your page on a piece of paper or in Photoshop, focusing on a very simple layout:
-Footer
-Header
-Column 1
-Column 2
Step 2:
Attach a pixel value to each element using 800px as a base line for the entire width of the page
Step 3:
Take each of the element’s pixel values and calculate their width’s in percentage (if column 1 is 570px, then its percentage is 570px divided by 800px)
Step 4:
Write CSS that uses the values calculated in Step 3
1: #page
2: {
3: width:80%;
4: margin:0 auto 0 auto;
5: }
6:
7: #header
8: {
9: width:100%;
10: height:50px;
11: margin-bottom:5px;
12: background-color:silver;
13: }
14:
15:
16: #col1
17: {
18: float:left;
19: width: 71%;
20: margin-left:1%;
21: margin-bottom:5px;
22: display:inline;
23: background-color:gray;
24: }
25:
26: #col2
27: {
28: float:left;
29: width: 20%;
30: margin-left:1%;
31: margin-bottom:5px;
32: background-color:gray;
33: }
34:
35: #footer
36: {
37:
38: clear:both;
39: background-color:silver;
40: }
41:
42: #gutter
43: {
44: float: left;
45: width: 1%;
46: height: 5px;
47: }
Step 5:
Write html to use the CSS created in Step 4
1: <html>
2: <head>
3: <title>css layouttitle>
4: <LINK REL=StyleSheet HREF="style.css" TYPE="text/css">
5: head>
6:
7: <body>
8: <div id="page">
9: <div id="header">headerdiv>
10: <div id="gutter">div>
11: <div id="col1">column 1 contentdiv>
12: <div id="col2">column 2 contentdiv>
13: <div id="footer">footerdiv>
14: div>
15: body>
16: html>
Leave a Reply