Website Layouts with CSS

CSS Website LayoutsIn this CSS Video Tutorial I’ll show you how to layout a whole web page using Cascading Style Sheets. I’ll create headers, content areas, footers and numerous sidebars. I’ll also show you how to make major changes to a website layout with a limited amount of coding.

If you’d prefer to read this information in an article see this CSS Layout and Positioning.

All of the code used can be found in the article above and also follows the video tutorial. If you have any questions or comments leave them below. You can use the code in any way that you wish.

Code From the Video Tutorial

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

<title>Playing With DIV Tags</title>

<style> <!– First without and then with this –>

#brain2 {

border-width: 2px;

border-style: dotted;

border-color: #4682B4;

background-color: #E0FFFF;

width: 200px;

text-align: center;

}

</style>

</head>

<body>

<div id=”brain”>

<h3>What a Brain</h3>

<p>

<img src=”http://www.newthinktank.com/wp-content/uploads/2010/03/LittleBrain.png” alt=”Picture of Blue Brain” />

</p>

<p>

Here I am demonstrating how to style a div element. This is pretty exciting stuff.

</p>

</div>

</body>

</html>

Another great thing about div elements, is that you can edit the tags inside of it with ease. Let’s say you want to change the color of the <h3> tag, inside of the brain2 div. Just type the following into your style sheet:

#brain2 h3 {

color: purple;

}

.irritate {

color: fuchsia;

text-decoration: blink;

}

And then insert the following code into your xHTML code:

<span class=”irritate”>Wow, this will blow your mind</span>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

<title>Playing With DIV Tags</title>

<style> #lypsum { border-color: #FFFFFF; }

#brain2 {

border-width: 2px;

border-style: dotted;

border-color: #4682B4;

background-color: #E0FFFF;

width: 200px;

text-align: center;

float: right; /* Here is the float property in action */

margin-left: 50px;

}

</style>

</head>

<body>

<h2>Demonstrating the Float Property</h2>

<div id=”brain2″>

<h3>What a Brain</h3>

<p>

<img src=”http://www.newthinktank.com/wp-content/uploads/2010/03/LittleBrain.png” alt=”Picture of Blue Brain” />

</p>

<p>

Here I am demonstrating how to style a div element. This is pretty exciting stuff.

</p>

</div>

<div id=”lypsum”>

<h3>Just Some Random Text</h3>

<p>

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?

</p>

</div>

</body>

</html>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

<title>Playing With Layouts</title>

<style>

body {

background-color: #FFF;

}

#header {

background-color: #006;

color: #FFF;

padding: 20px;

}

#footer {

background-color: #006;

color: #FFF;

padding: 20px;

}

#lypsum {

background-color: #FAF0E6;

margin-right: 240px; /* This is the reason the main content is separated from the sidebar */

}

#brain2 {

border-width: 2px;

border-style: dotted;

border-color: #4682B4;

background-color: #E0FFFF;

width: 200px;

text-align: center;

float: right; /* You could just as easily float to the left */

margin-left: 20px;

margin-top: 20px; /* Without this, your sidebar would be touching the header */

}

</style>

</head>

<body>

<div id=”header”><h2>This is the Title Bar</h2></div>

<div id=”brain2″>

<h3>What a Brain</h3>

<p>

<img src=”http://www.newthinktank.com/wp-content/uploads/2010/03/LittleBrain.png” alt=”Picture of Blue Brain” />

</p>

<p>

Here I am demonstrating how to style a div element. This is pretty exciting stuff.

</p>

</div>

<div id=”lypsum”>

<h3>Just Some Random Text</h3>

<p>

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?

</p>

</div>

<div id=”footer”><h2>This is the Footer</h2></div>

</body>

</html>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

<title>Playing With Layouts</title>

<style>

body {

background-color: #FFF;

}

#header {

background-color: #006;

color: #FFF;

padding: 20px;

}

#footer {

background-color: #006;

color: #FFF;

padding: 20px;

}

#lypsum {

background-color: #FAF0E6;

margin-right: 450px;

}

#brain2 {

border-width: 2px;

border-style: dotted;

border-color: #4682B4;

background-color: #E0FFFF;

width: 200px;

text-align: center;

float: right;

margin-left: 20px;

margin-top: 20px;

}

#brain3 {

border-width: 2px;

border-style: dotted;

border-color: #4682B4;

background-color: #E0FFFF;

width: 200px;

text-align: center;

float: right;

margin-left: 420px;

margin-top: 20px;

}

</style>

</head>

<body>

<div id=”header”><h2>This is the Title Bar</h2></div>

<div id=”brain2″>

<h3>What a Brain</h3>

<p>

<img src=”http://www.newthinktank.com/wp-content/uploads/2010/03/LittleBrain.png” alt=”Picture of Blue Brain” />

</p>

<p>

Here I am demonstrating how to style a div element. This is pretty exciting stuff.

</p>

</div>

<div id=”brain3″>

<h3>What a Brain</h3>

<p>

<img src=”http://www.newthinktank.com/wp-content/uploads/2010/03/LittleBrain.png” alt=”Picture of Blue Brain” />

</p>

<p>

Here I am demonstrating how to style a div element. This is pretty exciting stuff.

</p>

</div>

<div id=”lypsum”>

<h3>Just Some Random Text</h3>

<p>

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?

</p>

<p>

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?

</p>

<p>

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?

</p>

</div>

<div id=”footer”><h2>This is the Footer</h2></div>

</body>

</html>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

<title>Playing With Layouts</title>

<style>

body {

background-color: #FFF;

}

#header {

background-color: #006;

color: #FFF;

padding: 20px;

}

#footer {

background-color: #006;

color: #FFF;

padding: 20px;

}

#lypsum {

background-color: #FAF0E6;

margin-right: 250px;

margin-left: 250px;

}

#brain2 {

border-width: 2px;

border-style: dotted;

border-color: #4682B4;

background-color: #E0FFFF;

width: 200px;

text-align: center;

float: right;

margin-left: 10px;

margin-top: 20px;

}

#brain3 {

border-width: 2px;

border-style: dotted;

border-color: #4682B4;

background-color: #E0FFFF;

width: 200px;

text-align: center;

float: left;

margin-right: 10px;

margin-top: 20px;

}

</style>

</head>

<body>

<div id=”header”><h2>This is the Title Bar</h2></div>

<div id=”brain2″>

<h3>What a Brain</h3>

<p>

<img src=”http://www.newthinktank.com/wp-content/uploads/2010/03/LittleBrain.png” alt=”Picture of Blue Brain” />

</p>

<p>

Here I am demonstrating how to style a div element. This is pretty exciting stuff.

</p>

</div>

<div id=”brain3″>

<h3>What a Brain</h3>

<p>

<img src=”http://www.newthinktank.com/wp-content/uploads/2010/03/LittleBrain.png” alt=”Picture of Blue Brain” />

</p>

<p>

Here I am demonstrating how to style a div element. This is pretty exciting stuff.

</p>

</div>

<div id=”lypsum”>

<h3>Just Some Random Text</h3>

<p>

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?

</p>

<p>

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?

</p>

<p>

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?

</p>

</div>

<div id=”footer”><h2>This is the Footer</h2></div>

</body>

</html>

Setting Up a Locked Layout

To create a layout that is locked down, you need to surround all of your div’s with a enclosing div with a fixed width. The CSS Styling for it would look like this:

#master {

width: 1000px; /* Fixed width will keep everything locked down */

padding-top: 10px; /* You’ll probably want padding */

padding-bottom: 10px;

background-color: #ffffff; /* Probably the same color as the background color for your <body> tag */

margin-left: auto; /* Centers the whole web page and makes the left and right margins equal */

margin-right: auto;

}

Place Div’s Exactly Where you Want

Yes, you can tell the browser exactly where to place your div’s down to the pixel and it’s called Absolute Positioning. I have to warn you though, that it is very easy to break the structure of a web page if you don’t precisely calculate the exact placement of your div’s. Over the years, when I have been called in to fix someone else’s CSS errors it has almost always been because of errors with Absolute Positioning.

The major difference between normal and absolute positioning, is that the order of the HTML code doesn’t matter. Think of your divs as playing cards. You could stack them up on top of each other with absolute positioning. In fact, there is a new property for absolute positioned divs that specifies which div is above others on the page (The Z Index).

The CSS style coding for an absolute positioned div looks like this:

#sidebar {

background-color: #FFFFFF;

padding: 20px;

position: absolute; /* Here is where we a defining that this div will be absolute positioned */

top: 100px; /* We want it to appear 100 pixels from the top of the web page */

right: 0px; /* We want it to be stuck to the right of the browser web page */

width: 200px;

z-index: 99; /* The higher this number, is the top more the div will be versus the others */

}

Relative Positioning

A div element that is relatively positioned is positioned relative to another div. Welcome to another technique that can break your page design, if not used properly! You would relatively position an object within the div that it lies by default. Here is the code needed to relatively position anything:

.sidebar img {

position: relative;

left: 100px;

top: 100px;

}

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

<title>Playing With Layouts</title>

<style>

body {

background-color: #FFF;

}

#header {

background-color: #006;

color: #FFF;

padding: 20px;

}

#footer {

background-color: #006;

color: #FFF;

padding: 20px;

}

#lypsum {

background-color: #FAF0E6;

margin-right: 250px;

margin-left: 250px;

}

#brain2 {

border-width: 2px;

border-style: dotted;

border-color: #4682B4;

background-color: #E0FFFF;

width: 200px;

text-align: center;

float: right;

margin-left: 10px;

margin-top: 20px;

}

#brain3 {

border-width: 2px;

border-style: dotted;

border-color: #4682B4;

background-color: #E0FFFF;

width: 200px;

text-align: center;

float: left;

margin-right: 10px;

margin-top: 20px;

}

#popup {

border-width: 2px;

border-style: dotted;

border-color: #4682B4;

background-color: #E0FFFF;

width: 200px;

text-align: center;

position: fixed;

top: 100px;

left: 300px;

}

</style>

</head>

<body>

<div id=”header”><h2>This is the Title Bar</h2></div>

<div id=”brain2″>

<h3>What a Brain</h3>

<p>

<img src=”http://www.newthinktank.com/wp-content/uploads/2010/03/LittleBrain.png” alt=”Picture of Blue Brain” />

</p>

<p>

Here I am demonstrating how to style a div element. This is pretty exciting stuff.

</p>

</div>

<div id=”brain3″>

<h3>What a Brain</h3>

<p>

<img src=”http://www.newthinktank.com/wp-content/uploads/2010/03/LittleBrain.png” alt=”Picture of Blue Brain” />

</p>

<p>

Here I am demonstrating how to style a div element. This is pretty exciting stuff.

</p>

</div>

<div id=”popup”>

<h3>What a Brain</h3>

<p>

<img src=”http://www.newthinktank.com/wp-content/uploads/2010/03/LittleBrain.png” alt=”Picture of Blue Brain” />

</p>

<p>

Here I am demonstrating how to style a div element. This is pretty exciting stuff.

</p>

</div>

<div id=”lypsum”>

<h3>Just Some Random Text</h3>

<p>

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?

</p>

<p>

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?

</p>

<p>

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?

</p>

</div>

<div id=”footer”><h2>This is the Footer</h2></div>

</body>

</html>

4 Responses to “Website Layouts with CSS”

  1. efsa says:

    hey, I’ve just read your tutorial..
    big big thanks for the tutorial
    they really are useful for my final assignment

  2. credeau says:

    im very grateful and i really appreciate your tutorials…more power to you ADMIN 🙂

Leave a Reply

Your email address will not be published.

Google+