Which should I use, relative or absolute positioning?

Posted September 22, 2004

My biggest problem from when I first used layers back in the year I graduated in 2002, Dreamweaver would define the layers markup in the HTML page, all with absolute positioning. The problem with this was, as we all know, that each browser would read that differently, and it wouldn’t allow for any sort of a liquid layout with objects sizing to different browser windows.

As I have been building my CSS webpage, I have found that relative positioning in extremely useful, and here’s how.

If you haven’t figured out yet, the base of most CSS sites is what is usually termed a “wrapper”. Basically, this is a layer that contains every single piece of your content and subsequent layers.

Here is an example of code for a “wrapper”. (I am using an ID since it won’t be repeated more than once on a page;

div#wrapper{

margin:0 auto;
width:720px;
height:500px;

}

This is just an example, and you would probably use a combination of styles in the Body selector and more in the wrapper ID to set up the base for your site. Note:Take a look at the shorthand for the margin declaration. It is set to 0 and auto. The first measurement is for the margin of top and bottom, the second is for the left and right margin.

I don’t fully understand how “auto” works, but basically in this instance, it will center your wrapper in the middle of your browser window no matter what size.

Getting back to the original point, now you can set in each of your following containing block elements, or layers, the position:relative and set the margin in relationship to the position of the “wrapper”.

For example;

div#header{

margin-left:20px;

position:relative;
width:680px;
}

Another note, just like tables will render top to bottom in the manner that they are stacked in the code, so will layers. Each layer will render on top of each other in relation to how they are written in the code. (Unless you have a z-index set, but that is a whole other entry.)

This snippet of code will set a contain that is positioned in relation to the wrapper, 20 pixels from the left, in the very top because you don’t specify margin-top, and will be centered actually if you take a look at the wrapper width and this “header” container width.

This is really useful to get pixel perfect alignment, and along with using the float property can be very powerful.

How do I use the Float property?

“Float” is a property that I was not familiar with until I started working with CSS extensively. It is most commonly used as the equivalent of word or text wraps in the print world. Try this as an example;

IMG#example{

float:left;

}

This will set an ID for the IMG selector with a name of example. Then, open Dreamweaver, make a webpage with a table and a table cell and paste some copy into the cell. Then, insert an image and give the IMG tag the id name and the text should wrap around the image.

img src=”example.jpg” id=”example”…

To stylize the image further, so the text isn’t pressed right up against the sides, add a little padding to that style, shorthand for every side, and the image will move away from the text.

IMG#example{

float:left;

padding:10px;

}

While Float is the main building block for the three column CSS layout, it can also be used with two tables.

Make a new .html webpage and have two tables stacked on top of one another. Then, like we set for the IMG, set an ID using the Table selector specific to each table.

Table#left{

float:left;

}

Table#right{

float:right;

}

Apply the ID’s and watch what happens. There are some interesting applications where this can be used.

Setting the Table Selector Padding and Margin to 0 will left justify a webpage.

I was having some weird problems in Mozilla with my webpage, which was set to align=”center”, actually aligning to the left. Earlier on, I had set my “Table” selector margin and padding to 0px because I was getting weird spaces between tables when I was stacking them inside of a table cell.

But, after I removed that declaration of the table selector from my stylesheet, the webpage aligned to center again. I don’t really have more of an explanation, instead chalk that up to a browser quirk.

How do I make my website code XHTML and CSS compliant?

As I have been looking at CSS based websites, I have noticed that the cool thing to do, is at the bottom of the site list the words XHTML and CSS. Upon closer inspection, I found these were links to site validators, and as I clicked them, they validated just fine. I figured, cool, one more way to show my expertise on the subject. (Forgetting that I was still learning.)

I decided to put the links at the bottom of my site. As it has grown exponentially in the last couple of weeks, I haven’t even bothered to click on those links. But during testing the other day, I did. I remembered reading about XHTML specs a year or so ago, and didn’t see that much difference from HTML 4.01. However, when I clicked the links for validation, I was in for a surprise.

Basically, here is what I learned as I had to go back and fix a million errors. Thank God for the find and replace in Dreamweaver, otherwise I wouldn’t be typing this entry from the light at the other side of the tunnel.

As a little sidebar, the X in HTML is taken from XML. In XML you cannot have an open tag, all tags must be closed in order for the file to work.

First:

Make sure that any HTML tags that don’t have a closing set, now have a closing tag.

E.G. Your Link, Meta, IMG, and BR tags

This is how you should correctly write one of these tags, using the IMG selector as our example. “src=”something.jpg” alt=”One cool Image” />”

Which brings us to the next point, all images must have alt tags filled in. This is to make your site accessible to more devices that have access to the internet mostly.

All of your HTML tags must be lowercase. Gone are the days of tags that look like this.

TABLE CELLSPACING=”0″>

In order to be XHTML compliant, this same line of code will look like this;

table cellspacing=”0″>

Make sure you define your measurements in your stylesheets. This is not as common, but you can no longer write;

.style{

margin-left:0;

}
The correct way to write this is;

.style{

margin-left:0px;

}
Finally, this was one I didn’t know, as opposed to the other ones I kind of remembered reading about, but just was lazy about implementing.

When writing your semantic style sheet, use ID’s sparingly. ID’s are meant for one instance only, per one webpage. Also, when defined ID’s will always take precedence over a selector specific class. But let me back up.

This is an example ID, notice the pound sign. This style will be applied only to tables with an ID of “hotWheels”.

table#hotWheels{

font-weight:bold;

}

Now if you try to use that same table with the ID “hotWheels” and set a class where the font-weight is not bold you will run into a problem. The ID takes precedence, and sets the font weight for the whole table to bold. You would have to set another ID for one particular section of text to set the font-weight back to normal.

A better way to have written this was a Selector specific class like such;

table.hotWheels{

font-weight:bold;

}

Now you can set all sorts of classes in the table with font-weight’s and not have to worry about them being bold.