positioning - relative or absolute?

[google]

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: Select all

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]

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

[MikeHopley]

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]

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]

which part dont u understand ?

[Lchad]

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]

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

Less headaches

[MikeHopley]

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]

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]

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

[Marc]

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]

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

[digilover]

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]

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.