Learning xHTML and CSS – day 19 of 30
Everything you wanted to know about CSS absolute positioning
Until now we’ve discussed in-line elements (such as link anchors), floating elements (such as list items), and today we’ll discuss absolutely positioned elements. The theory and advantage behind absolute positioned elements is that you have complete control on where you want to place them (to the nearest pixel). Today’s post is special in that it contains both a screencast tutorial as well as a written tutorial, and from today, you’ll learn everything you ever wanted to know about CSS absolute positioning.
From this part on you have three options:
- You can watch the video and that’s it
- You can watch the video and continue reading
- You can skip the video and read the tutorial
I highly recommend both watching the screencast and reading the tutorial as I’m sure you’ll grasp a lot more by reading rather than by watching.
CSS absolute positioning explained from scratch
The theory behind absolutely positioned items
So what’s actually taking place? You start with a main div like so:
<div id="main">
</div>
Now, in this div we input a little content. First let’s write a small phrase to indicate that we’re looking at the main div, then let’s add four more divs that will later be absolutely positioned within the main div. So, in short, accomplish this:
- Indicate the main div as the MAIN CONTENT DIV
- Input four additional divs with id’s of div1, div2, div3, and div4
- Indicate those divs with 1, 2, 3, 4
So your xHTML should look like this:
<div id="main">
MAIN CONTENT DIV
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
</div>
See how we inputted four more divs into the main div?
Now, let’s input that into the appropriate location of our main xHTML document that we’ve been working with, open it with our favorite browser, refresh, and let’s see the result.
The xHTML
<!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">
<head>
<title>My first website</title>
<link href="reset.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="pagewrap">
<div id="header">
<h1>My first website!</h1>
</div>
<div id="content">
<ul id="nav">
<li><a href="index.html">home</a></li>
<li><a href="about.html">about me</a></li>
<li><a href="contact.html">contact me</a></li>
</ul>
</div>
<div id="main">
MAIN CONTENT DIV
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
</div>
<div id="footer">
<p>This is our footer section</p>
</div>
</div>
</body>
</html>
Which leads us to this result:
Now we need to add a little style to these divs. So let’s apply the following styles:
- Make the main div have a height and width of 200 pixels, centered text, bolded, and background-color of #cccccc
- Make each of the four divs have width and height of 50 pixels, centered text, bolded, white.
The CSS you should’ve come up with is the following:
#main { height: 200px; width: 200px; margin: 15px; line-height: 200px; text-align: center; background: #cccccc; }
#div1,#div2,#div3,#div4 { height: 50px; width: 50px; line-height: 50px; text-align: center; color: white; font-weight: bold; }
Now, before I show you a screenshot of that, let’s apply some necessary additions to our CSS:
- Give the main div relative positioning
- Give the four divs absolute positioning
What’s the reasoning behind that? Well, if you absolutely position items, they almost always should be absolutely positioned within a relatively positioned item. Why’s that? Because then the absolutely positioned items are positioned relative to the relatively positioned item. I know this all sounds really really confusing. But we’ll see examples of this later with the main div having relative and absolute positioning.
So, the final CSS you should get is:
#main { position: relative; height: 200px; width: 200px; margin: 15px; line-height: 200px; text-align: center; background: #cccccc; }
#div1,#div2,#div3,#div4 { position: absolute; height: 50px; width: 50px; line-height: 50px; text-align: center; color: white; font-weight: bold; }
Easy so far, right? Okay. Now let’s take a look at the result:
I’ve highlighted the ’4′ so you can see where it’s currently located. You see, it’s showing up in the footer. Why? Because it’s absolutely positioned, yet we didn’t tell it where to be positioned.
So let’s do that now.
- Make div1 positioned top left with background green
- Make div2 positioned top right with background blue
- Make div3 positioned bottom right with background purple
- Make div4 positioned bottom left with background red
The final CSS you should have is:
#main { position: relative; height: 200px; width: 200px; margin: 15px; line-height: 200px; text-align: center; background: #cccccc; }
#div1,#div2,#div3,#div4 { position: absolute; height: 50px; width: 50px; line-height: 50px; text-align: center; color: white; font-weight: bold; }
#div1 { top: 0; left: 0; background: green; }
#div2 { top: 0; right: 0; background: blue; }
#div3 { bottom: 0; right: 0; background: purple; }
#div4 { bottom: 0; left: 0; background: red; }
And finally, the entire page CSS is:
body { background-color: white; font-size: 12px; }
a { color: red; font-size: 12px; text-decoration: none; }
a:hover { color: blue; text-decoration: underline; }
h1 { font-size: 20px; border-bottom: solid 2px orange; }
#header { height: 30px; }
#navigation { height: 20px; }
#content { height: 20px; }
#footer { height: 20px; border-top: dotted 1px black; }
/* NEW STYLES FOR NAVIGATION */
#nav li {
list-style-type: none;
float: left;
margin-left: 10px;
}
#nav li a {
padding: 2px 10px;
border: solid 1px black;
}
#nav li a:hover {
background-color: orange;
}
/* NEW STYLES for absolute positioning */
#main { position: relative; height: 200px; width: 200px; margin: 15px; line-height: 200px; text-align: center; background: #cccccc; }
#div1,#div2,#div3,#div4 { position: absolute; height: 50px; width: 50px; line-height: 50px; text-align: center; color: white; font-weight: bold; }
#div1 { top: 0; left: 0; background: green; }
#div2 { top: 0; right: 0; background: blue; }
#div3 { bottom: 0; right: 0; background: purple; }
#div4 { bottom: 0; left: 0; background: red; }
And the result (also shown in the first picture) is:
As you can see, those divs are absolutely positioned within the MAIN CONTENT div.
One last thing. Suppose we remove the following CSS style for the main div:
position: relative;
So it’s no longer relatively positioned. Where do you suppose div 1-4 will be positioned? If you guessed relative to the body of the page, then you were right. Take a look:
See how they’re at the corners of the actual body of the page, rather than relative to the main div? That’s the beauty of relative and absolute positioning!
Summary
Today we learned about absolute positioning. You now know that absolutely positioned items need (or most often are) within relatively positioned items. And with this, we conclude our tour of CSS positioning.
Hope you enjoyed it Be sure to subscribe to the RSS feed so you can get the new post by email (via the RSS feed link or through the Email RSS Subscription in the sidebar on the right). Also, feel free to contact me with any questions, or use my contact form to send me any private comments, suggestions, price quotes, job offers, feedback or just a plain “hi!”. Finally, make sure to check out my portfolio to see my latest work.
