CSS Fluid layout tutorial

By: Kasted
Thursday, January 4th, 2007

Text:

| Print

| Share:

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.

</p> <p>* { /* sets 0 margin and 0 padding on everything */<br /> margin: 0;<br /> padding: 0;<br /> }</p> <p>body {<br /> background: #FFF;<br /> color: #333;<br /> font-family: Arial, Helvetica, sans-serif;<br /> font-size: 14px;<br /> }</p> <p>h2 {<br /> padding: 5px 0 5px 0;<br /> margin: 0 0 10px 0;<br /> }</p> <p>p {<br /> margin: 0 0 10px 0;<br /> }</p> <p>ul {<br /> padding: 5px 0 5px 20px;<br /> }</p> <p>li {<br /> padding: 3px 0 3px 0;<br /> }</p> <p>#wrapper, #content-wrapper {<br /> float: left;<br /> width: 100%;<br /> }</p> <p>#header {<br /> height: 60px;<br /> padding: 15px 0 5px 0;<br /> border-bottom: 1px solid #ccc;<br /> background: #FFFFDF;<br /> }</p> <p>#content {<br /> margin: 0 15% 0 20%; /*Margins for content column. Should be “0 RightColumnWidth 0 LeftColumnWidth*/<br /> }</p> <p>#left {<br /> float: left;<br /> width: 20%; /*Width of left column in percentage*/<br /> margin-left: -100%;<br /> background: #EEFFDF;<br /> }</p> <p>#left h2, #right h2 {<br /> border-bottom: 1px dotted #CCC;<br /> }</p> <p>#right {<br /> float: left;<br /> width: 15%; /*Width of right column in pixels*/<br /> margin-left: -15%; /*Set margin to that of -(RightColumnWidth)*/<br /> background: #DFFDFF;<br /> }</p> <p>#footer {<br /> clear: left;<br /> width: 100%;<br /> background: black;<br /> color: #FFF;<br /> text-align: center;<br /> padding: 4px 0;<br /> }</p> <p>#footer a {<br /> color: #FFFF80;<br /> }</p> <p>.in {<br /> margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/<br /> margin-top: 0;<br /> }</p> <p>

Now that we have our CSS for the layout lets get our HTML to complete the layout.

</p> <p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br /> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></p> <style type="text/css"> @import url(style.css); </style> <p></head><br /> <body></p> <div id="wrapper"> <div id="header"> <div class="in"> <h1>NowCSS 100% Width Fluid Layout!</h1> </p></div> </p></div> <div id="content-wrapper"> <div id="content"> <div class="in"> <h2>This is the main content</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam adipiscing, risus quis fringilla venenatis, diam nisi adipiscing magna, sit amet rutrum risus nunc sit amet odio. Praesent ullamcorper. Donec sit amet ipsum. Nam consequat rhoncus lacus. Pellentesque libero erat, elementum a, mattis in, molestie id, magna. Integer sed libero vitae lacus elementum egestas. Nullam massa magna, gravida sed, porta vel, ultricies at, purus. Maecenas turpis. Vivamus ante risus, eleifend sed, scelerisque at, lacinia vitae, nunc. Vestibulum ut arcu. Cras ut magna. Pellentesque eleifend commodo est. Sed vitae odio eget ipsum tristique hendrerit. Cras elementum turpis ut sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut sed erat at velit bibendum varius. Sed venenatis sagittis lectus. Cras ligula felis, ultrices et, imperdiet et, laoreet sed, odio. Morbi nunc tellus, hendrerit in, aliquet eget, rutrum a, magna. Nunc nunc.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam adipiscing, risus quis fringilla venenatis, diam nisi adipiscing magna, sit amet rutrum risus nunc sit amet odio. Praesent ullamcorper. Donec sit amet ipsum. Nam consequat rhoncus lacus. Pellentesque libero erat, elementum a, mattis in, molestie id, magna. Integer sed libero vitae lacus elementum egestas. Nullam massa magna, gravida sed, porta vel, ultricies at, purus. Maecenas turpis. Vivamus ante risus, eleifend sed, scelerisque at, lacinia vitae, nunc. Vestibulum ut arcu. Cras ut magna. Pellentesque eleifend commodo est. Sed vitae odio eget ipsum tristique hendrerit. Cras elementum turpis ut sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut sed erat at velit bibendum varius. Sed venenatis sagittis lectus. Cras ligula felis, ultrices et, imperdiet et, laoreet sed, odio. Morbi nunc tellus, hendrerit in, aliquet eget, rutrum a, magna. Nunc nunc.</p> <ul> <li>Lorem ipsum dolor</li> <li>Lorem ipsum dolor</li> <li>Lorem ipsum dolor</li> <li>Lorem ipsum dolor</li> <li>Lorem ipsum dolor</li> <li>Lorem ipsum dolor</li> <li>Lorem ipsum dolor</li> </ul> <h2>This is the main content</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam adipiscing, risus quis fringilla venenatis, diam nisi adipiscing magna, sit amet rutrum risus nunc sit amet odio. Praesent ullamcorper. Donec sit amet ipsum. Nam consequat rhoncus lacus. Pellentesque libero erat, elementum a, mattis in, molestie id, magna. Integer sed libero vitae lacus elementum egestas. Nullam massa magna, gravida sed, porta vel, ultricies at, purus. Maecenas turpis. Vivamus ante risus, eleifend sed, scelerisque at, lacinia vitae, nunc. Vestibulum ut arcu. Cras ut magna. Pellentesque eleifend commodo est. Sed vitae odio eget ipsum tristique hendrerit. Cras elementum turpis ut sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut sed erat at velit bibendum varius. Sed venenatis sagittis lectus. Cras ligula felis, ultrices et, imperdiet et, laoreet sed, odio. Morbi nunc tellus, hendrerit in, aliquet eget, rutrum a, magna. Nunc nunc.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam adipiscing, risus quis fringilla venenatis, diam nisi adipiscing magna, sit amet rutrum risus nunc sit amet odio. Praesent ullamcorper. Donec sit amet ipsum. Nam consequat rhoncus lacus. Pellentesque libero erat, elementum a, mattis in, molestie id, magna. Integer sed libero vitae lacus elementum egestas. Nullam massa magna, gravida sed, porta vel, ultricies at, purus. Maecenas turpis. Vivamus ante risus, eleifend sed, scelerisque at, lacinia vitae, nunc. Vestibulum ut arcu. Cras ut magna. Pellentesque eleifend commodo est. Sed vitae odio eget ipsum tristique hendrerit. Cras elementum turpis ut sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut sed erat at velit bibendum varius. Sed venenatis sagittis lectus. Cras ligula felis, ultrices et, imperdiet et, laoreet sed, odio. Morbi nunc tellus, hendrerit in, aliquet eget, rutrum a, magna. Nunc nunc.</p> </p></div> </p></div> </p></div> <div id="left"> <div class="in"> <h2>Left Bar</h2> <ul> <li>Lorem ipsum dolor</li> <li>Lorem ipsum dolor</li> <li>Lorem ipsum dolor</li> <li>Lorem ipsum dolor</li> <li>Lorem ipsum dolor</li> <li>Lorem ipsum dolor</li> <li>Lorem ipsum dolor</li> </ul></div> </p></div> <div id="right"> <div class="in"> <h2>Right Bar</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam adipiscing, risus quis fringilla venenatis, diam nisi adipiscing magna, sit amet rutrum risus nunc sit amet odio. Praesent ullamcorper. Donec sit amet ipsum. Nam consequat rhoncus lacus. Pellentesque libero erat, elementum a, mattis in, molestie id, magna. Integer sed libero vitae lacus elementum egestas. Nullam massa magna, gravida sed, porta vel, ultricies at, purus. Maecenas turpis. Vivamus ante risus, eleifend sed, scelerisque at, lacinia vitae, nunc. Vestibulum ut arcu. Cras ut magna. Pellentesque eleifend commodo est. Sed vitae odio eget ipsum tristique hendrerit. Cras elementum turpis ut sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut sed erat at velit bibendum varius. Sed venenatis sagittis lectus. Cras ligula felis, ultrices et, imperdiet et, laoreet sed, odio. Morbi nunc tellus, hendrerit in, aliquet eget, rutrum a, magna. Nunc nunc.</p> </p></div> </p></div> <div id="footer"> <span>NowCSS.com – CSS Tutorials and Articles</span> </div> </div> <p></body><br /> </html></p> <p>

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:

</p> <link rel="stylesheet" href="style.css" media="screen" /> <p>

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.

Topics: CSS, Design, Web Development

About the Author:

Hundreds Of Tutorials	Developer News
Unique Gadget Videos	Tons of Topics to Discuss
Expert Advice	We Will Publish Your Articles

Find Out More About DevWebPro!

Sign up for the newsletter

Welcome to the New DevWebPro!

CSS Fluid layout tutorial

Leave a Comment

Sections

Related Topics

Find Out More About DevWebPro!

Sign up for the newsletter

Welcome to the New DevWebPro!

CSS Fluid layout tutorial

Leave a Comment

Related Articles

Related Videos

Sections

Related Topics