CSS Fluid layout tutorial

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.

large-res-example.jpg

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.

Leave a comment