Are Fluid Websites Worth Making Anymore?

First of all it depends on your audience and your content. Amazon and Wikipedia are only couple of examples and are one of the most visited websites in the world. When asking a question like this or even thinking of creating a fluid layout the first thing that pops-out in most front end developers is “How is it going to look in IE6?”. Well we all want to stop supporting IE6 but that’s not the case with all there visitors that are using it. According to w3Schools 13% of the Web uses IE6. That’s a good reason to support IE6. Simple ideological dislike is not enough to dump IE6. Some people are arguing that in most modern browsers you can hold control and scroll your mouse wheel to basically re-size any website. So why should we make the layout fluid, browsers have the problem solved. Well most users aren’t that savvy to know all the features and shortcuts. You have to realize most computer users don’t even KNOW HOW to zoom in the browser! Most users are so far from the understanding of computers that we have. We always have to remember that fact. Making a website fluid, by adding a min/max-width attribute seems to be the best of both worlds. You support fluidity, but you limit it at a certain width (say, 800px and 1200px). So, it is up to you to decide and when you go to your next meeting and client says “I want my layout to be fluid” here are some things you talk about before you take the final decision:

  1. Text is hard(er) to read when lines are very long.
  2. Your audience may have larger or smaller resolutions than normal, and picking an ‘incorrect’ static width will annoy them.
  3. Maintaining a fluid site can be, but doesn’t have to be much more difficult than its static counterpart.

Best Page Width and Screen Resolution Trends

Liquid layouts are decidedly out-of-fashion. Fixed-width, centered layouts have become the dominant design pattern for the Web, and for good reason too. Fixed-width layouts allow designers to define strict proportions between columns, and keep line-lengths under control. Another thing that is not considered anymore by designers and developers is the 800×600 resolution, more and more people buy larger screens with better resolutions. Only about 4% of the users are still using the 800×600 resolution on their monitors. That means that we can increase the width of our pages, which will decrease the height and we can put more content to the top of the our pages.

Below you can see a list of random selected, fixed width, web pages

Most of the pages will fit inside 1024×768 (except IMDB & Buy.com), which will cover around 93% of your visitors [ source: W3School Display Statistics ].

In conclusion, if you select your next web site to have fixed width you can choose for your width to be anywhere between 960px to 1020px.

Note: the average width from the sites above is 982px, which will give you 980px page width with 1px for left & right border.

Tip: You can also have 100% header & footer with fixed width body.

3 Free Fixed Width CSS Templates

Here you can find and use the code for three of the most popular fixed width layouts. I’ve created the structure and added some basic CSS so you can easily use them as a base for your templates.

2 Column Fixed Width Layout

This is your generic two column layout with left sidebar, you can easily move the sidebar to the right by changing its float from left to right.

The HTML Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>The Choppr - 2 Columns / Left Sidebar / Fixed Width / Centered</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">@import "style.css";</style>
</head>
<body>

<div id="container">

    <div id="header">
        <p>Luis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris.</p>
    </div>

    <div id="body">

        <div id="left-sidebar">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing, nunc quis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
        </div>

        <div id="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing, nunc quis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
        </div>
    </div>

    <div id="footer">
        <p>Luis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris.</p>
    </div>
</div>

</body>
</html>

 

The CSS Code:


html, body {
    padding: 0px;
    margin: 0px;
    height: 100%;
}

div#container {
    width: 980px;
    margin: 0 auto;
    border: 1px solid #000;
}

div#header {
    height: 100px;
    background: #ba6f19;
    border-bottom: 1px solid #000;
    padding: 10px;
}

div#body {
    overflow: hidden;
    width: 980px;
}

div#content {
    width: 760px;
    float: left;
    padding: 10px;
}

div#left-sidebar {
    width: 179px;
    float: left;
    padding: 10px;
    background: #ba6f19;
    border-right: 1px solid #000;
}

div#footer {
    height: 100px;
    background: #ba6f19;
    border-top: 1px solid #000;
    padding: 10px;
}

 

3 Column Fixed Width Layout

This is your generic three column layout with left and right sidebars. To have full height sidebars I’ve added a page background image (repeat-y) that keeps each sidebar background to go all the way down to the footer.

The HTML Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>The Choppr - 3 Columns / Left/Right Sidebars / Fixed Width / Centered</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">@import "style.css";</style>
</head>
<body>

<div id="container">

    <div id="header">
        <p>Luis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris.</p>
    </div>

    <div id="body">

        <div id="left-sidebar">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing, nunc quis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
        </div>

        <div id="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing, nunc quis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
        </div>

        <div id="right-sidebar">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing, nunc quis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
        </div>
    </div>

    <div id="footer">
        <p>Luis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris.</p>
    </div>
</div>

</body>
</html>

 

The CSS Code:


html, body {
    padding: 0px;
    margin: 0px;
    height: 100%;
}

div#container {
    width: 980px;
    margin: 0 auto;
    border: 1px solid #000;
}

div#header {
    height: 100px;
    background: #ba6f19;
    border-bottom: 1px solid #000;
    padding: 10px;
}

div#body {
    overflow: hidden;
    width: 980px;
    background: url("page-back.gif") repeat-y top left;
}

div#content {
    width: 560px;
    float: left;
    padding: 10px;
}

div#left-sidebar {
    width: 179px;
    float: left;
    padding: 10px;
}

div#right-sidebar {
    width: 179px;
    float: left;
    padding: 10px;
}

div#footer {
    height: 100px;
    background: #ba6f19;
    border-top: 1px solid #000;
    padding: 10px;
}

 

Full Width Header and Footer (Fixed Layout)

And finally, there is header and footer backgrounds extending the full width of the page, however, the main sections of the layout header, footer & body are fixed width.

The HTML Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>The Choppr - Fluid Header/Footer / Fixed Body / Sticky Footer</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">@import "style.css";</style>
</head>
<body>

<div id="container">

    <div id="main">

        <div id="header-outer">

            <div id="header">
                <p>Luis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris.</p>
            </div>
        </div>

        <div id="body">

            <div id="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing, nunc quis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing, nunc quis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
            </div>
        </div>
    </div>
</div>

<div id="footer-outer">
    <div id="footer">
        <p>Luis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris.</p>
    </div>
</div>

</body>
</html>

 

The CSS Code:


html, body {
    height: 100%;
    padding: 0px;
    margin: 0px;
}

/* IE7 Fix */
* html #container {
    display: table;
    height: 100%
}

/* Opera Fix */
body:before {
    content: "";
    height: 100%;
    float: left;
    width: 0;
    margin-top: -32767px;
}

div#container {
    height: 100%;
    height: auto !important;
    min-height: 100%;
}

div#main {
    overflow: auto;
    padding-bottom: 100px;
}

div#header-outer {
    width: 100%;
    background: #ba6f19;
    border-bottom: 1px solid #000;
}

div#header {
    width: 660px;
    height: 100px;
    margin: 0px auto;
    padding: 10px;
}

div#body {
    width: 680px;
    margin: 0px auto;
    height: 100%;
    height: auto !important;
    min-height: 100%;
    margin-bottom: -100px;
}

div#content {
    padding: 10px;
}

div#footer-push {
    height: 100px;
}

div#footer-outer {
    background: #ba6f19;
    border-top: 1px solid #000;

    width: 100%;
    position: relative;
    height: 100px;
    margin-top: -101px;
    clear: both;
}

div#footer {
    width: 660px;
    height: 100px;
    margin: 0px auto;
}

div#footer p {
    padding: 20px;
    margin: 0px;
}

 

2 Column Fluid Layout (100% height) with Left/Right Sidebar

Following the previous article, where I described how you can create a 3 column fluid layout with expanding 100% of the page height, I’ve decided to post another two similar layouts (both expand 100% of the page height):

  1. 2 Column Fluid Layout with Left Sidebar & Sticky Footer
  2. 2 Column Fluid Layout with Right Sidebar & Sticky Footer

The HTML Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>The Choppr - 2 Columns / Left Sidebar / Fluid Width / Scticky Footer</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">@import "style.css";</style>
</head>
<body>

<div id="container">

    <div id="main">

        <div id="header">
            <p>Luis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris.</p>
        </div>

        <div id="body">
            <div id="left-sidebar">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing, nunc quis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
            </div>

            <div id="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing, nunc quis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
            </div>
        </div>

    </div>
</div>

<div id="footer">
    <p>Luis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris.</p>
</div>

</body>
</html>

 

The CSS Code:


html, body {
    height: 100%;
    padding: 0px;
    margin: 0px;
}

body {
    background: url("left-sidebar-back.gif") repeat-y top left;
}

/* IE7 Fix */
* html #container {
    display: table;
    height: 100%
}

/* Opera Fix */
body:before {
    content: "";
    height: 100%;
    float: left;
    width: 0;
    margin-top: -32767px;
}

div#container {
    height: 100%;
    height: auto !important;
    min-height: 100%;
}

div#main {
    overflow: auto;
    padding-bottom: 100px;
}

div#header {
    height: 100px;
    background: #ba6f19;
    border-bottom: 1px solid #000;
    padding: 20px;
}

div#body {
    overflow: hidden;
    height: 100%;
}

div#content {
    margin: 0px 0px 0px 300px;
    padding: 20px;
}

div#left-sidebar {
    width: 260px;
    float: left;
    padding: 20px;
}

div#footer {
    background: #ba6f19;
    border-top: 1px solid #000;

    position: relative;
    height: 100px;
    margin-top: -101px;
    clear: both;
}

div#footer p {
    padding: 20px;
    margin: 0px;
}

 

And here is the other one:

The HTML Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>The Choppr - 2 Columns / Right Sidebar / Fluid Width / Scticky Footer</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">@import "style2.css";</style>
</head>
<body>

<div id="container">

    <div id="main">

        <div id="header">
            <p>Luis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris.</p>
        </div>

        <div id="body">
            <div id="right-sidebar">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing, nunc quis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
            </div>

            <div id="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing, nunc quis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
            </div>
        </div>

    </div>
</div>

<div id="footer">
    <p>Luis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris.</p>
</div>

</body>
</html>

 

The CSS Code:


html, body {
    height: 100%;
    padding: 0px;
    margin: 0px;
}

body {
    background: url("right-sidebar-back.gif") repeat-y top right;
}

/* IE7 Fix */
* html #container {
    display: table;
    height: 100%
}

/* Opera Fix */
body:before {
    content: "";
    height: 100%;
    float: left;
    width: 0;
    margin-top: -32767px;
}

div#container {
    height: 100%;
    height: auto !important;
    min-height: 100%;
}

div#main {
    overflow: auto;
    padding-bottom: 100px;
}

div#header {
    height: 100px;
    background: #ba6f19;
    border-bottom: 1px solid #000;
    padding: 20px;
}

div#body {
    overflow: hidden;
    height: 100%;
}

div#content {
    margin: 0px 300px 0px 0px;
    padding: 20px;
}

div#right-sidebar {
    width: 260px;
    float: right;
    padding: 20px;
}

div#footer {
    background: #ba6f19;
    border-top: 1px solid #000;

    position: relative;
    height: 100px;
    margin-top: -101px;
    clear: both;
}

div#footer p {
    padding: 20px;
    margin: 0px;
}

 

3 Column Fluid Layout (100% Height)

Fluid layouts aren’t very easy to handle especially when you would like for your pages to expand not only horizontally but also vertically. With tables it’s much easier to handle this problem, however, when it comes up to table-less layouts there are a lot more things you would need to consider.

Here is an example of the 3 Column Fluid Layout expanding 100% of the page height & Sticky Footer.

The HTML code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>The Choppr - 3 Columns / Left/Right Sidebars / Fluid Width / Sticky Footer</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">@import "style.css";</style>
</head>
<body>

<div id="container">

    <div id="main">

        <div id="header">
            <p>Luis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris.</p>
        </div>

        <div id="body">
            <div id="left-sidebar">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing, nunc quis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
            </div>

            <div id="right-sidebar">
                <p>Luis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
            </div>

            <div id="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing, nunc quis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
            </div>
        </div>
    </div>
</div>

<div id="footer">
    <p>Luis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris.</p>
</div>

</body>
</html>

 

You can see it’s pretty straightforward, all the major section of the page are labeled appropriately. The only section that you might have a question about is the #footer-push, which is used to straighten up the footer, as explained and shown on the Ryan Fait’s example of the Sticky Footer.

The CSS code:


html, body {
    height: 100%;
    width: 100%;
    padding: 0px;
    margin: 0px;
}

body {
    background: url("right-sidebar-back.gif") repeat-y top right;
}

/* IE7 Fix */
* html #container {
    display: table;
    height: 100%
}

/* Opera Fix */
body:before {
    content: "";
    height: 100%;
    float: left;
    width: 0;
    margin-top: -32767px;
}

/* IE6 Fix */
* html div#body {
    overflow: visible;
}

div#container {
    height: 100%;
    height: auto !important;
    min-height: 100%;
    background: url("left-sidebar-back.gif") repeat-y top left;
}

div#main {
    overflow: auto;
    padding-bottom: 100px;
}

div#header {
    height: 100px;
    background: #ba6f19;
    border-bottom: 1px solid #000;
    padding: 20px;
}

div#body {
    overflow: hidden;
    height: 100%;
}

div#content {
    margin: 0px 300px 0px 300px;
    padding: 20px;
}

div#left-sidebar {
    width: 260px;
    float: left;
    padding: 20px;
}

div#right-sidebar {
    width: 260px;
    float: right;
    padding: 20px;
}

div#footer {
    background: #ba6f19;
    border-top: 1px solid #000;

    position: relative;
    height: 100px;
    margin-top: -101px;
    clear: both;
}

div#footer p {
    padding: 20px;
    margin: 0px;
}

 

The left and right sidebars are floating on each side of the page, they would need to have the same width as the two background images that you are using. Also if you would like to add padding to the sidebars you are going to need reduce the width with that amount.

Moreover, notice the body element, it will need to have 100% height and also to clear the floats we need to use the overflow: hidden option (for IE6 there is a bug and the overflow need to be visible to work out)

Here is an example of the 3 Column Fluid Layout expanding 100% of the page height.

Free CSS Layouts

A variety of free CSS layouts and free CSS templates dominate the canvas of Advanced CSS websites. And all of these free templates contribute to satisfaction of web designer to create one of the masterpieces in CSS websites.

All these free templates had been designed by free CSS. Free CSS is soon becoming a know resource for CSS templates and other CSS relevant information sources.

Here are some of the examples of free CSS templates:

  1. Unlink free templates – Unlink is a completely free and fully standard-compliant CSS template. It was released under a Creative Commons Attributions 2.5 license, so you are absolutely free to conduct any experiment on it, provided you keep the links in the footer intact. This template is also available as a WordPress theme at free WordPress Themes.
  2. Newsflash free template – Newsflash is a free and standardized CSS layout designed by free CSS template. Released under a Creative Commons Attributions 2.5 license, this free template is customized to let people do whatever they want on it. This template is also available as WordPress theme at free WordPress Themes websites.
  3. Edgy free template – Edgy is a completely free and fully standard-compliant CSS template. It was released under a Creative Commons Attributions 2.5 license, so you are absolutely free to conduct any experiment on it, provided you keep the links in the footer intact. This template is also available as a WordPress theme at free WordPress Themes.
  4. Waterfalls – Waterfalls is a free and standardized CSS layout designed by free CSS template. Released under a Creative Commons Attributions 2.5 license, this free template is customized to let people do whatever they want on it. This template is also available as WordPress theme at free WordPress Themes websites.

Some of the other free CSS layouts available are Roundhouse, Mosaic, Decorative, Glazed, Frozenage, Logistix, Thegreenhouse, Pillars, Axian, Gardenmesh, Pizzaparlor, Lasvegastoo, Cityscape, Pinklily, Isometric, Integral, Flowery, etc. All these free templates are released under Creative Commons Attributions 2.5 license and available as WordPress theme at free WordPress themes websites.

What is CSS Table?

CSS Tables are used by authors to organize their page content into visually appealing documents. These tables are defined by using specific layered grids. CSS table models are based on HTML, in which the structure of the table parallels the visual representation of the table. The tables comprise further tables, rows, columns, row groups, captions, column groups and cells. But recently it is the table model that has become essential for authors as they can specify rows and not columns, explicitly in the document language.

One of the main advantages of CSS table model is it does not require that the document language should include elements that correspond to each of those components. For document languages [like XML applications] that do not have any pre-defined table elements, the authors must map document language elements to table elements; especially done with display property. However, it is ‘display’ values that assign table semantics to an arbitrary element:

Table (in HTML: TABLE)
Signifies that elements define a block-level table: it is a rectangular block that participates in a block-formatting context.

Inline-table (in HTML: TABLE)

Signifies that an element must define as inline-level table: a rectangular block that will participate in inline-formatting context

Table-row-group (In HTML: TBODY)

Signifies that an element groups one or multiple rows

Table-row (In HTML: TR)

Signifies that an element groups one or multiple row of cells

Table Column (In HTML: COL)

Signifies that an element describes a column of cells

Table column-group (IN HTML: COLGROUP)

Signifies that an element groups one or more columns

Table header-group (In HTML: THEAD)

Like ‘table-row-group’ but for visual formatting, the row group is always displayed before all other rows and row groups and after any top captions. Print user agents might repeat footer rows on each page spanned by a table.

Table footer-group (In HTML: TFOOT)

Like ‘table-row-group’ but for visual formatting, the row group will always be displayed after all other rows and row groups and before any bottom captions.

Table Cell (In HTML: TD, TH)

Signifies that an element also represents a table cell

Table-caption (In HTML: CAPTION)

Signifies a caption for the table

Column Selectors

Table cells are usually associated to two contexts – rows and columns. In the source document, cells descend from rows and never from the columns. However, setting properties on various columns can influence some aspects of the cells.

Following properties apply to column and column-group elements:

  • Width – the width property allows minimum width for the column
  • Border – various border properties are applicable to columns only if ‘border-collapse’ is set to collapse on the table element. Borders set on columns and column groups are put into the conflict resolution algorithm that basically selects the border style at every cell edge
  • Visibility – in case the visibility of the column is set to ‘collapse’, none of the cells in the column are rendered and cells that span into other columns are clipped together. Complimentary to this, the width of the table is diminished by the width space taken up by the column.
  • Background – the background properties set the background for cells in the column, but only if both the cells and rows have transparent backgrounds.

Below are some of the other examples of style rules that set properties on columns. The first two rules implement the rules attribute of HTML 4.0 with a value of “cols”. The third rule makes the “totals” column blue and the final two rules show how to attribute fixed size to the columns, by usage of fixed layout algorithm.

COL         {border-style: none solid}
TABLE       {border-style: hidden}
COL.totals  {background: blue}
TABLE       {table-layout: fixed}
COL .totals {width: 5em}

Visual diagrammatic layout of table contents

The visual layout of table contents is bordered by rectangular, irregular grid of rows and columns. Each box of the table occupies a whole number of grid cells that follow a host of rules. These rules do not conform to HTML 4.0 or any other earlier versions of HTML; but HTML definitely imposes its own set of limitations on row and column spans.

Following are the set of rules on table contents:

  1. Each row box occupies a single row of grid cells. When placed together, each of these row boxes fill the table right from top to bottom in the order they occur in the source document (i.e. the table would occupy exactly as many grid rows as the number of row elements)
  2. A row group occupies the same grid cells as the row it contains
  3. A column group box occupies same grid cells as the columns it contains
  4. A column box occupies one or multiple columns of grid cells. Column boxes are positioned next to each other in the order that they occur. The first column box may be either on the left or on the right, depending on the value of the ‘direction’ property of the table.
  5. A cell box cannot extend beyond the last row box of a table or row-group; the user agents will shorten it until it fits
  6. Cells may span several rows and columns. (Although CSS2 will not define how the number of spanned rows or columns are determined, an user agent will have special knowledge about the source document. However, a future version of CSS might provide a way to express this knowledge in CSS syntax). Each of the cells is a rectangular box, with one or more grid cells as high and wide. The topmost row of this rectangle is in the row specified by the cell’s parent. The rectangle will be as far positioned to the left as possible, but it will not overlap with any of the other cell boxes, and must be to the right of all cells in the same row that are earlier in the source document. (This restriction holds if the ‘direction’ property of the table is ‘ltr’; if the ‘direction’ is ‘rtl’, interchange “left” and “right” in the previous sentences.)

Note: Table cells may be relatively and absolutely positioned, but this is not recommended: positioning and floating remove a box from the flow will affect the table alignment.

Here are two examples. The first is assumed to occur in an HTML document:

<table>
    <tr>
        <td>1</td>
        <td rowspan= "2">2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td colspan= "2">5</td>
</table>

<table>
    <row>
        <cell>1</cell>
        <cell rowspan= "2">2</cell>
        <cell>3</cell>
        <cell>4</cell>
    </row>
    <row>
        <cell colspan= "2">5</cell>
    </row>
</table>

The second table is formatted as in the figure on the right. However, HTML table’s rendering is explicitly undefined by HTML, and CSS does not try to define it. User agents are free to render it, e.g. as in the figure on the left.

clip_image010.gif

Building CSS Print Style Sheet

This section will teach you to create a print style sheet. In order to impart a good look and feel to the web page, you will need to add styles that will help in removal of unwanted page elements and backgrounds, format text, and add a printable logo and also print the URLs attached to any links on the web page.

Remove unneeded page elements

Firstly, you need to understand how the page is laid out so that you can decide which elements you want to be printed:

1. Launch web browser

In case your web page contains main content, navigation links, new links, printed subscribes and Contact links, and printed style sheet should hide all these parts of the page.

2. Create new file named print.css

In the text editor; create a new file named print.css. In the new print style sheet, the first order of business is to hide the navigation bar and also other parts pf the web page that you don’t want to print.

3. Create new properties

Using the display property, create a new group selector that hides site tools, navigation bar and new sidebars, like:

#sitetools, #nav, #new {
        display: none;
}

When the display property is set to none, web browsers hide those elements so they would not print. But initially you need to attach this external style sheet to the web pages so that browsers can find it.

Removing backgrounds and adjusting layout

Mostly, background images and colors print out, but often they also don’t get printed. Although it all depends on the browser and visitor’s setting, yet some browsers fail to print background elements at all. Printing backgrounds is very important as it becomes essential for printed page to look just like the screen version.

You can return to the text editor and print.css file. You can add two new styles to remove the background color and banner.

body {
    background: #fff;
}

#banner {
    background: #fff;
}

When viewed on screen, the web page also has a gray background and a graphic that creates a drop shadow effect to the left and right edges of the content. The banner also holds a graphic that includes the logo of the site. These two styles set the background color of the page and banner to white and remove the graphic.

Now you need to adjust the layout so that the text fills an entire printed page. Start by changing the #wrapper ID style, which sets the entire width of the content area of the page to a perfect 760 pixels.

Add another style to the print.css style sheet

Your next style would include adding another style to the print.css style sheet.

#wrapper {
	background: #FFF;
	border-style: none;
	width: auto;
}

The first declaration in this step acts just like the previous steps. It sets the background to white color and also removes all background images. The second property, however, removes the black border that appears on both the left and right edges of the wrapper. The last declaration – width:auto – affects the complete layout of the page. However, it overrides the 760-pixel width setting from the global.css file and leaves the exact width up to the Web browsers. Auto simply allows the <div> fill to enter available width, so no matter whatever be the paper size – letter A4, or something else – the content fills the width of the printed page.

Add newer styles to print.css files

#main {
    border: none;
    padding: 0;
    width: auto;
}

The first two properties eliminate the borders and the extra white space visible in the onscreen version of the page. The third declaration allows the text to fill the width of the page, just like the width:auto setting you added for the #wrapper in step2.

Add a copyright region of the page:

#legal {
    padding-left: 0px;
}

You can feel free to save this file and use the Print Preview function to see how the printed version would look like.

Fascinating Free CSS Templates

These free CSS templates are learning tools that allow you to create a difference in your website. But these templates should be thoroughly tested before they are being used on a ‘production’ website.

There are three types of templates to be discussed:

  • Two column
  • Three column
  • General

Two Column CSS templates

  1. Two-column flexible – this template can be used in browsers like Mozilla 1.5 beta, Mozilla Firefox 0.8, Netscape 7.1, Opera 7.11, and Internet Explorer 6. Probably this is one of the easiest pages to make. It contains two layouts divisions; the main content division just floats to the left.
  2. Two Column, left column static with header bar – this template can be used in browsers like Mozilla 1.5 beta, Mozilla Firefox 0.8, Netscape 7.1, Opera 7.11, and Internet Explorer 6. it includes two columns, the left column is absolutely positioned in a way on the left and is used with a fixed width. The right side content column is sized and positioned by using margins and resized with browser window. It also has a simple header bar which is used for links, search boxes etc.

Three Column CSS template

  1. Three Column, Left & Right columns static – this template can be used in browsers like Mozilla 1.5 beta, Mozilla Firefox 0.8, Netscape 7.1, Opera 7.11, and Internet Explorer 6. It includes three columns, with left column absolutely positioned on the left and with a fixed width. The two right content columns is sized and positioned by using margins and resizes with the browser window.
  2. Three Column “pixel-perfect’ with header – this template can be used in browsers like Mozilla 1.5 beta, Mozilla Firefox 0.8, Netscape 7.1, Opera 7.11, and Internet Explorer 6. This includes a three-column template, which fits in the dimensions, and is perfectly known as “pixel perfect”. It has a header div. It will expand to fit into the whole screen.
  3. Three column, pixel-perfect with header and footer – this template can be used in browsers like Mozilla 1.5 beta, Mozilla Firefox 0.8, Netscape 7.1, Opera 7.11, and Internet Explorer 6. One of the templates that take a complete different look and feel. It has three columns, a header and footer that get resized along with the browser window.

General CSS Templates

  1. Center Float Box – this template can be used in browsers like Mozilla 1.5 beta, Mozilla Firefox 0.8, Netscape 7.1, Opera 7.11, and Internet Explorer 6. This is pretty simple template that has one top and b ottom “bar” for links etc with a center box of fixed or percentage width, which floats in the browser. The content box has a scroll bar.
  2. Nested Box – this template can be used in browsers like Mozilla 1.5 beta, Mozilla Firefox 0.8, Netscape 7.1, Opera 7.11, and Internet Explorer 6. This is a simple template, which just has a division nested in a main division and floating to one side. It is a very simple and effective template.

CSS Positioning: Fixing Frames with Fixed Positioning

Fixed positioning in CSS allows you to extract sections of the document, remove them from the natural document flow and make them blatantly visible so that they don’t scroll around with the rest of the document.

Working of Fixed Positioning

Fixed positioning was a common feature introduced in CSS2. You are only allowed to use absolute and relative, values in fixed positioning, to create complex layouts in the documents. Fixed value and absolute value work in a similar way, with one stark difference. The positioned block’s containing block is defined by viewport. An absolutely positioned block will be well removed from the normal document flow and positioned relative to either the canvas or its nearest ancestor element.

Now you should note the difference between canvas and viewport. While a canvas is a large flat space on which the document is rendered and the viewport is a bit in the browser’s window, where the document mainly occurs. In case the canvas is bigger than the viewport, only a segment of the canvas will be visible at a time, and the browser will usually allow you to scroll around the document using a scroll bar or something similar to it.

In case of fixed positioning, you can take an element and position it not just outside the document flow, but also outside the canvas, and simply attach it to the viewport. This means that the element will not scroll with the rest of the document, but remain visible all the time. This effect is essential for things like a table of contents or a list of navigational links, and generally people also use frames.

A list of six CSS properties is essential to positioning elements – the first group includes four properties – top, bottom, left and right. The second group includes two properties of width and height.

There is a difference between the first and second group – top, bottom, left and right – sets the distance between edges of containing block and outer or margin edge of the element [space between the contents, border, margin and padding], while the width and height sets the difference between the content or inner edge of the element.

In order to position an element, you need to supply at least any two of these properties in every dimension. For example, if you want to horizontally position the navigation element to occupy the entire width of the viewport, we can either set left to 0 and width to 100% or set left to 0 and right to 0. The default values of all these properties is auto which means that the browser will position the element according to those properties that had been set explicitly and scale one of the ones left as “auto” to fit the elements into the available space.

« Older Entries

  Subscribe to our RSS Feed   Follow us on Twitter

You've arrived on the "Advanced CSS/HTML Explained" weblog. Here you will find how can you tackle the more difficult topics of Cascading Style Sheets: Floating theory, Forms, Tables, Navigation elements, CSS Positioning. Also you will find lots of Resources, Tutorials, Articles, and Tips, Tricks Tools, and Techniques on CSS.

Recent Posts

Categories

Twitter Updates

Bookmark and Share