Using Relative Positioning For Consistent Layout

Fire up your favorite text or CSS editor, and create a style sheet (linked as "styles.css" in this example). I’ll go through the definition of the styles one element at a time.

body

{

      margin: 0px;

      padding: 0px;

}

Here we remove any default margins or padding that the browser creates for the page, giving us complete control of the layout.

#all

{

      padding: 10px 0px;

      width: 90%;

}

So that things aren’t crunched to the top or bottom of the screen, we create a little bit of padding. And to ensure that there will be no sideways scrolling (never a pleasant thing for UI design), we define all elements to be contained within 90% of the screen.

#logo

{

      position: relative;

      top: 10px;

}

So this is our first relatively positioned element. As we want the logo to remain centered –- which is its default position –- we can simply adjust the top position. This moves it down 10px, giving the page a comfortable starting point, which is not crunched too close to the top.

#nav

{

      position: relative;

      top: 75px;

      left: -280px;

      width: 150px;

      border-width: 1px;

      border-style: solid;

      border-color: #333;

      padding: 4px;

}

Here we move the navigation box over to the left. Instead of using float, which would throw it to the extreme left of its container, the preference is to control its exact location. We could achieve this by assigning a value of 280px to the "right" property, but I find it’s easiest on the brain to work with "top" and "left." Assigning a negative value (-280px) has the effect of moving it the opposite of the left property.

#main_content

{

      position: relative;

      top: -70px;

      left: 80px;

      width: 500px;

      text-align: left;

      border-width: 1px;

      border-style: solid;

      border-color: #333;

      padding: 6px;

}

As for the main content, we move it a little to the right by increasing its left property slightly. This gives the page layout a slightly more balanced appearance. Also, we assign a negative top value, to move it up. This is necessary, because by default it would simply appear below the navigation box. Something to keep in mind here is that, if you add links to the main navigation area, you may need to adjust the top value of the main content, because the change in size of the navigation box would affect the default and relative positioning of all elements after it.

#footer

{

      position: relative;

      width: 160px;

      left: 220px;

      top: -50px;

      text-align:right;

      font-size: 10px;

      border-width: 1px;

      border-style: solid;

      border-color: #333;

      padding: 3px;

}

We move the footer inconspicuously off to the right. We also need to move it up, because its position is still affected by the navigation box.

So if you copy this line for line, it will produce something that looks like the following, no matter what browser, OS, or resolution you’re using:

Conclusion

The main thing to keep in mind is that when you define all elements’ positions as relative, changing the properties of one element can change the positions of all elements, and thereby the layout of the entire page. This is unlike absolute positioning, wherein each element is positioned independently of every other element on the page.

I used only a few basic elements in my example. To see this in practice, check out http://justincook.sytes.net. You can see how everything flows nicely, even with varying amounts of main content in each page.

Once you get a handle on relative positioning, you can add and configure as many main elements as you’d like. Just remember the order in which they’re rendered on the page. This is what determines where they should be located.

Relative positioning is just one key element in a multi-environment-friendly world of Web design. Hopefully this article has been helpful to you in solving your Web standards frustrations!