And speaking of my position, today I'm writing about positioning! The position selector is something I've used in the past, and it's very useful for placing page elements exactly where you want them. Even if it takes a few tries before you get it there. Of course, this sort of number hacking can be avoided if you know the size of all your elements ahead of time. I usually forget.
To introduce my short example, I'll also need to introduce something called a <div>. <div> is an html tag used to separate - or divide - the document into logical sections. A simple website may only have a couple of <div>s. For example, there may be one called "header" which contains the page title and graphic, one called "mainContent" for the site's content (text, images, links), and one called "footer" for displaying copyright information.
Most of the time, web designers like to wrap ALL of the site's content inside a container <div>. That's because it allows them more control to position all elements easily. Think of it as kind of like Russian nesting dolls. If all the dolls are contained within the largest doll, you can move them all easily. If there was no container, you'd have to move each of them individually. In most cases, this <div> is called "wrapper" or "container". I like to use "wrapper" just because I can type it faster.
Here is what the wrapper div would look like in an html document.
<html>
<head><title>The Title of the Page</title>
</head>
<body>
<div id="wrapper">
<p>
Here is some content in a wrapper div.
</p>
</div>
</body>
</html>
So, I just used "id" and set the name of the div to "wrapper." Which is important because that's the name we're going to need to use in our stylesheet to tell this div what to do.
And here is what my stylesheet looks like:
body {
background: #000;
}
#wrapper {
background: #ddd;
}
All I did was set some background colors so we can see where the outside of our box is. And here is what we end up with.
As you can see, our body and our #wrapper are not aligned. We can see the black color of the body on both the left and right, as well as the top of #wrapper.
This was a problem for me because I wanted the header and navigation to be able to bleed off to the edges of the browser window. If I set body {margin: 0;}, that takes care of the right and left sides, but there's still a gap at the top. I still don't quite understand why that is. If anyone knows, please explain in the comments section. The way I've found around it for now is to use position on our #wrapper like so:
body {
background: #000;
}
#wrapper {
position: absolute;
top: 0;
left: 0;
background: #dddddd;
}
View.
Now our box is positioned 0 from the top and 0 from the left, leaving us without the gap at the top. In this case, setting the position to fixed would have the same effect. But using the position property had an unexpected side-effect. Instead of our #wrapper extending all the way to the right like it did before, now our box is shrink-wrapped to the width of its content. That's because when something is absolutely positioned, it is removed from the "flow" of the document. This means other elements (in this case body) behave as though it's not there. I fixed this by adding the width property to my CSS like this:
#wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: #dddddd;
}
Now our box goes all the way to the edge of the browser window, no matter how it's resized. Great! Exactly what I wanted!
For now... :)
