CSS Primer: A Place For Everything
Last week we covered the main idea behind the DIV tag and some background about what it's meant for and some of the advantages of using it. Now, it's time to start putting the tag to work.
Let's start with the following code:
<html>
<head>
<title>IJHAW Layout Demo - One Column</title>
<link rel="stylesheet" type="text/css" xhref="main.css" />
</head>
<body>
<div id="main">
<div id="centercolumn">
<p>Main Content</p>
</div>
</div>
</body>
</html>
If you're not familiar with the LINK tag above, this is the code that allows us to access the CSS information stored in a separate document. We can then just edit that document instead of changing all of our code.
You'll also notice that both the DIVs on this page are using the ID attribute, because they'll only appear on the page once.
We'll then pair this with the main.css file containing the following:
#main {
width: 770px;
margin: 0 auto;
}
#centercolumn {
border: 1px solid #ccc;
width: 770px;
float: left;
} The combination of these two pieces of code will then create a page with a single column that is 770 pixels wide (like this). The margin setting on the main DIV also centers the column on the page.
Ok, so that makes for a good warmup, but I'm sure you would like more sections to work with. So lets put together a 2-column layout with a header (like this). We'll start with the following html page.
<html>
<head>
<title>IJHAW Layout Demo - Two Columns With Header</title>
<link rel="stylesheet" type="text/css" xhref="main.css" />
</head>
<body>
<div id="main">
<div id="header">
This is my Header
</div>
<div id="leftcolumn"> Left Column</div>
<div id="centercolumn">
<p>Main Content</p>
</div>
</div>
</body>
</html>
You'll notice that I now have added two other DIV sections in my main DIV section. Now, without any style applied to them, each DIV would appear one on top of the other in a single column. In most cases, this is not what we'd like to see, so let's take a look at the CSS that will allow us to arrange them as we'd like to see them.
#main {
width: 770px;
margin: 0 auto;
}
#header {
border: 1px solid #ccc;
height: 70px;
background-color: #66CC66;
}
#leftcolumn {
width: 170px;
float: left;
border: 1px solid #ccc;
background-color: #6666CC;
}
#centercolumn {
border: 1px solid #ccc;
width: 596px;
float: left;
} When we combine these two, we get an easy layout that many people are familiar with. Notice that the centercolumn has been set with a width of 596 pixels. This is because there is a 1 pixel border on both itself and the leftcolumn DIV (4 pixels of width total), and the sum of the width columns should be equal or less than the width of the DIV they are contained in. If they are add up to more than that, then there is a good chance they will get reshuffled in a way that you did not intend.
So those are the basics of site layout using DIV and CSS. Things can get much more complex, but the basics still apply in each case. Next time, I'll be discussing how to make your DIVs appear the way you'd like. This will include colors, background images, fonts, and some basic effects. Until then, have fun playing with your layouts.
There are no comments for this entry.
[Add Comment]