Lesson 9

CSS Positioning

OBJECTIVE

We will be examining the different positioning rules for controlling the way content boxes interact with each other, or keep them in one space. The web is simply a moveable version of a magazine layout.

PREREQUISITE

By now you should be familiarized working with HTML and CSS elements, now it's time to marry the two by assigning rules to your HTML tags so that content boxes can run smoothly against each other.

First let us get the proper syntax out of the way so you can use them in these examples.

Static - This is the browser's default setting for an overall movement as the web page is resized, and it flows with the sizing of the browser's window.

Relative - An element will stay with in it's general area of space and may overlap in some areas, so aware of this overlapping because it can still look tacky if not used properly.

Absolute - Absolute will be relative to it's parent element and does not follow the flow of the web page's sizing. This also will overlap too in some situations.

Z-index - Z-index can really come in handy for controlling your own overlapping of elements. The best way I can describe this is to think of it in Photoshop/Illustrator terms, both use layers to stack elements in front or behind the other. Here you do the same, but you use low or high numbers to indicate it's order. The example below demonstrates a very simple approach.

Ok..Now that you know the basic anatomy of the syntax, it's time to see it in action as the examples below will give a nice visual.

Here is our basic layout that we will work with throughout these examples and make changes along the way to see their results.

First either copy and paste this code into the "Give It A Try" box to see what it will look like, but I strongly recommend typing it out for practice.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Content Box Positioning</title>
</head>
<style rel="stylesheet" type="text/css">
body {
background-color:#666;
color:#FFF;
}
.boxGallery {
margin:0 auto;
width:100%;
height:auto;
padding: 5px;
float: left;
}
.box1 {
margin: 20px;
width: 100px;
height: 100px;
background-color: #ff6600;
border: 3px dashed #000;
float: left;
}
.box2 {
margin: 20px;
width: 100px;
height: 100px;
background-color: #ff6600;
border: 3px dashed #000;
float: left;
}
.box3 {
margin: 20px;
width: 100px;
height: 100px;
background-color: #ff6600;
border: 3px dashed #000;
float: left;
}
</style>
<body>
<div class="boxGallery">
<div class="box1">Content Box 1</div>
<div class="box2">Content Box 2</div>
<div class="box3">Content Box 3</div>
</div><!--End boxGallery-->
</body>
</html>