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></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"></div>

    <div id="body">
        <div id="left-sidebar"></div>
        <div id="content"></div>
    </div>

    <div id="footer"></div>

</div>

</body>
</html>

The CSS Code:


html, body {
    padding: 0px;
    margin: 0px;
}

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></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"></div>

    <div id="body">
        <div id="left-sidebar"></div>
        <div id="content"></div>
        <div id="right-sidebar"></div>
    </div>

    <div id="footer"></div>

</div>

</body>
</html>

The CSS Code:


html, body {
    padding: 0px;
    margin: 0px;
}

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></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-outer">
        <div id="header"></div>
    </div>

    <div id="body">
        <div id="content"></div>
    </div>

    <div id="footer-push"></div>
</div>

<div id="footer-outer">
    <div id="footer"></div>
</div>

</body>
</html>

The CSS Code:


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

div#container {
    height: 100%;
}

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 {
    width: 100%;
    background: #ba6f19;
    border-top: 1px solid #000;
}

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

Popularity: 42% [?]

Categories: CSS Layouts, Posted on February 24, 2009 by Choppr | Log in

One Comment

Post a Comment - TrackBack- RSS Comments

Comment by Jim McCall:
You have no allowances for collapsing margins or bad IE code provisions. I think any column based css layout needs to include this to be safe.

September 22, 2009 @ 3:49 am

3 Free Fixed Width CSS Templates

One Comment

Write a Comment

Categoies

Latest Posts

Most Popular Posts