positioning - relative or absolute?

google · October 29th, 2007, 08:26 PM

hi all, im relatively new to web design, only got in to css last week and still learning a lot.

i made my first proper functional site, using fully w3 compliant html and css yesterday, but have been told that my method for positioning divs etc i bad.

the way i do it at the moment, the only way i know how, is using absolute positioning. so my stylesheet is sort of as follows:

Code:

div.logo
{
    border-style: solid;
    border-width: 1px;
    border-color: #3D3D3D;
    position: absolute;
    background: url('../images/topbg.jpg');
    background-repeat: repeat-x;
    text-align: left;
    width: 65%;
    top: 5px;
    left: 17.5%;
    right: 17.5%;
    height: auto;
}

div.topbar
{
    border-style: solid;
    border-width: 1px;
    border-color: #3D3D3D;
    background: url('../images/topbarbg.jpg');
    background-repeat: repeat-x;
    position: absolute;
    width: 65%;
    left: 17.5%;
    right: 17.5%;
    top: 103px;
    height: 24px;
    text-align: right;

}

div.content
{
    background-color: #FFFFFF;
    border-style: solid;
    border-width: 1px;
    border-color: #3D3D3D;
    border-top: none;
    position: absolute;
    top: 129px;
    bottom: 31px;
    width: 65%;
    left: 17.5%;
    right: 17.5%;
    text-align: center;
}

div.content_box
{
    position: absolute;
    top: 1%;
    left: 20%;
    right: 1%;
    bottom: 1%;
    text-align: center;
    overflow: auto;
}

so im setting the absolute positions of everything. i have been told this i bad, and that i should use relative positions, but i just dont understand how. help would be appreciated, thx!

marSoul · October 30th, 2007, 06:36 AM

You can see this link :
http://www.w3schools.com/css/pr_class_position.asp
it has examples of how they work

MikeHopley · October 30th, 2007, 07:43 AM

You should not use positioning at all yet. Learn how to use floats first. Most page layouts can easily be achieved using floats.

Absolute and relative positioning are highly specialised tools. Don't use them indiscriminately, or you'll create a horrible mess!

google · October 30th, 2007, 08:28 AM

Quote:

Originally Posted by marSoul

You can see this link :
http://www.w3schools.com/css/pr_class_position.asp
it has examples of how they work

sorry, but i dont understand any of that lol

marSoul · October 30th, 2007, 08:34 AM

which part dont u understand ?

Lchad · October 30th, 2007, 09:58 AM

I never understand W3Schools either...
It's like reading an encyclopedia.

Try this tutorial. It will show you how to create a simple 2 column layout without using any positions. Just floats. Once you learn this... you will be so happy!

Positions should not be used for most elements because they will cause headaches. On occasion you will need them but rarely.

karinne · October 30th, 2007, 01:41 PM

Yeah ... I never use position: absolute or position: relative .... only float: left or float: right

Less headaches

MikeHopley · October 30th, 2007, 01:48 PM

Quote:

Originally Posted by karinne

Yeah ... I never use position: absolute or position: relative .... only float: left or float: right

Less headaches

There are, however, some nifty applications of positioning. For example, by applying absolute positioning to an image inside a relatively positioned parent, I can create a decorative image that breaks out of its parent's containing block, yet whose position will remain fixed relative to the parent (not the viewport).

This technique is superb for decorating pages in an elastic layout. If you scale the layout, the image will remain anchored in whatever way you desire.

karinne · October 30th, 2007, 01:50 PM

I don't deny that they have their uses but for someone who is just learning CSS, it's best, like you said, to stay away from them

alexgeek · October 30th, 2007, 02:05 PM

I only use absolute for banners in the top left/right.
It's quite useful for that

Marc · October 30th, 2007, 02:08 PM

Hi Google,

If you want to get a better understanding (while you are doing/looking at Linda's tutorial) have a look at this site before hand: http://css.maxdesign.com.au/floatutorial/.

I found it very interesting and helpful when i started out.

Monie · October 31st, 2007, 02:16 AM

Position absolute used by spamers to create their pop up irritating advertisement window!

digilover · November 8th, 2007, 12:39 PM

There's many valid uses for positioning especially when your source code is ordered in a different way to the design. I'd recommend reading Andy Clarke's Transcending CSS for examples - an excellent book anyway.

James.

karinne · November 8th, 2007, 01:00 PM

I definitely recommend Andy's book ... I read it and I learned quite a few things.

But ... for simple design, floats are the best to use.