The Wonder of Divs
Have you ever seen the kids' puzzle game where you have a box that is filled with squares and rectangles all nestled inside? The object is to dump the contents out of the box, swirl them around, and then try to fit them all back inside. Building a web page layout is putting together several blocks, called Divs, so they all fit well together.
The Building Blocks
In the example below, this simple, typical web page layout consists of four blocks. The first <div> is the Header that sits at the top of the page; the second <div> is the white content area; the third <div> is the left hand sidebar; the fourth <div> is the footer.
Remember that the most basic web page coding looks like this:
<html>
<head>
</head>
<body>
All of your content goes here
</body>
</html>
You will place all of the content that shows on the screen within the <body> ... </body> tags. So our basic page with the four "building blocks" shown in the image above will look like this:
<html>
<head>
</head>
<body>
<div id="header"> </div>
<div id="content"> </div>
<div id="sidebar"> </div>
<div id="footer"> </div>
</body>
</html>
Because your site will consist of several <div> ... </div> groups, some may be used only once on a page and others may be used several times.
Items like the header, content, sidebar, and footer areas are only used once on each page. They each need a unique name. We do that by giving them their own identifier, or ID for short. In CSS, an ID begins with the # symbol.
#header {
property: value;
property: value;
property: value; }
#content {
property: value;
property: value;
property: value; }
#sidebar {
property: value;
property: value;
property: value; }
#footer {
property: value;
property: value;
property: value; }
By
default, a div will expand in width to 100% of whatever block contains it.
This causes divs to sit one on top of each other. To have divs sit side by
side on the page, you must specify a width and a float to each div.
Positioning Elements
The Float
The float property can be applied to divs and accepts the value of right, left, or none. To have your content and sidebar areas sit side by side, the coding looks similar to the following:
#content {
float: right;
width: 600px;}
#sidebar {
float: left;
width: 300px;}
Absolute Positioning
Your CSS boxes can not only have a width and height, they can also be told where to appear. You can position a box by specifying its location something like this:
top: 50px;
left: 150px;
This would place the top left corner of the box at precisely 50 pixels down from the top of the screen and 150 pixels over from the left side of the screen. (You can also position top and right, bottom and left, and bottom and right.) This is kind of like placing sticky notes on the refrigerator.
But web pages aren't static. They are viewed by a wide variety of different computers with a range of screen resolutions. We can be more precise if we also use relative positioning.
Relative Positioning
In the example below, assume that we have two elements we need to place within the header area of our web page. The yellow area is for links, and the blue area is for the logo and site name.
We can have these two items sit on top of our header by assigning a relative position as follows:
#header {
position: relative;
background: #606060 url('images/headerimage.jpg')}
Now we can position other divs inside of the header by using absolute positioning as follows:
#toplinnks {
position: absolute;
top: 10px;
right: 20px;
z-index: 1}
#sitename {
position: absolute;
top: 50px;
left: 20px;
z-index: 2}
For the #toplinks ID, the position is set relative to the header so it sits 10 pixels down from the top and 20 pixels over from the right side. To keep elements from running into each other, each can be put on its own "layer" by using the z-index property.
The #sitename ID is also positioned relative to the header so it sits 50 pixels down from the top of the screen and 20 pixels over from the left of the screen. It also occupies its own layer.