CSS Fluid layout tutorial
If you're new here, you may want to subscribe to my RSS feed.
Knowing how to make a fluid layout using CSS is something that every web developer should learn, and it is very easy to do with these easy steps. In this tutorial we will create a 100% fluid layout, which means that everything on the site can resize to fit 100% of the browser window from 800×600 resolution to 1920×1080 the site is 100% of the browser window, no space will be wasted! Okay lets get started…
First off we’ll show off our layout, which is a very very simple template which can be easily converted with a couple lines of CSS to fit your layout.
For the example I show the site in the resolution 1650×1080 at max browser width.
Now that we know about fluid layouts and how theres an advantage to them lets start off with our CSS code, which would be the file ’style.css’. There are multiple comments in the CSS to help explain why those attributes were used, and how they work.
Now that we have our CSS for the layout lets get our HTML to complete the layout.
As you may notice, we use the @import function to include the CSS onto the file, personally I think that it is easier for you to use @import, but some do not, you can also use:
Checkout the example site here, and click here to download all the files used in this tutorial!
Please Note: This is a modification of DynamicDrives Liquid Layouts.
(14 votes, average: 3.93 out of 5)
Loading ...
10 Comments
CSS Fluid Layout Tutorial by Vernon Kesner on January 15, 2007
[…] Creating a CSS Fluid layout is something that has been covered many times in different ways. The truth is that knowing how to make a CSS fluid layout is something that every web developer should know how to do. […]
Terminator1138 on January 16, 2007
Nice tutorial there. Some more comments in the CSS would be handy for novices. It would also be nice to fit in graphics with this model. May times colors alone cannot do it. Overall, nice tutorial and nice example. Congrats.
Rajib Kundu on March 12, 2007
Nice work. Please make it a little detailed for novice like me.Thank You.
Girendra Singh on March 28, 2008
Very fine tutorial friend. Keep it up.
pushedx on July 4, 2008
This works fine in FF3 but doesn’t work correctly in IE7
Guess I have to play with it some, it’s perfect for what I need it for in FF though.
pushedx on July 4, 2008
My mistake on the last post; it was my fault. I used your css code but didn’t use the exact same html document.
The line that broke it for me was:
@import url(style.css);
I had my own older css include instead:
Hmm, that explains why my older css code wasn’t working either on IE7 but works fine on FF. Live learn pass it on I guess.
Great tutorial
pushedx on July 4, 2008
Code got parsed out, trying it again:
<link href=”style.css” rel=”stylesheet” type=”text/css”>
and if that does not show up:
LESSTHAN link href= QUOTE style.css QUOTE rel = QUOTE stylesheet QUOTE type= QUOTE text/css QUOTE GREATERTHAN
Just a gotcha that new web devs like myself might run into and not quite catch.
RJD on July 17, 2008
Need help with CSS:
I’m trying to add a footer at the bottom of this content without stating a fixed length for content4. My footer currently is overlayed with these images and names. Can someone help me?
#content4 {
width: 100%;
clear: both
}
#leftContent {
position: absolute;
left: 6%;
width: 21%
}
#centerLeftContent {
position: absolute;
left: 28%;
width: 21%
}
#centerRightContent {
position: absolute;
left: 50%;
width: 21%
}
#rightContent {
position: absolute;
left: 72%;
width: 21%
}
#rightContent, #centerRightContent, #centerLeftContent, #leftContent {
text-align: center
}
First Name Last Name
First Name Last Name
First Name Last Name
First Name Last Name
RJD on July 17, 2008
Follow up on last message.
A lot of divs did not translate onto my message. I’m trying to incorporate CSS from http://www.glish.com/css/8.asp but I would like to add a footer. Everything I tried keeps overlaying the footer under the 4 columns. Can someone help me? Thanks.
photoshop free tutorials on September 17, 2008
simply great stuff i was looking for a tutorial on fluid layout based on three columns but i didn’t find a good one
but now i am pretty happy that i have found a good one many many thanks