Hey guys, new to this forum and new to web designing but i'm learning through various tutorials online. All is going fairly well but I'd appreciate it if I could get few opinions of people on the positioning of elements.

I'm currently using position:relative (see excerpt below) as opposed to position:absolute or fixed/inherit .

Are there any disadvantages to this as the webpage layout does resemble the photoshop design?

 

Any info would be much appreciated.

 

******CODE********

 

#slogan {

position: relative;

top: 20px;

left: 5px;

}

 

#content {

position: relative;

top: 4px;

width: 825px; height: 680px; padding: 16px 16px 60px 16px; overflow: hidden;

color: #FFF;

background: url(images/content-bg.png);

border-radius: 3px;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

}

 

#content #slogan {

position: relative;

top: -20px;

}

 

#content #banner {

position: relative;

top: 4px;

left: 4px;

}

 

#content #information {

font-size: 14px;

text-align: justify;

width: 810px;

position:relative;

top: 30px;

left: 4px;

}

 

#content #information h2.header {

position:relative;

top:10px;

}

 

*****END CODE*********

First, use the code tags ( [ code ] [/ code ]) it makes your code allot simpler to read.

 

In my opinion, you should not be using position in this mannor, you are going to have so many issues between browsers and if the site breaks then it really breaks.

 

You should be using CSS floats to position your standard structure and then use position if/when needed for breaking box models, placing items ontop of one and another etc.

 

Here is a good reference: http://css.maxdesign.com.au/floatutorial/

First, use the code tags ( [ code ] [/ code ]) it makes your code allot simpler to read.

 

In my opinion, you should not be using position in this mannor, you are going to have so many issues between browsers and if the site breaks then it really breaks.

 

You should be using CSS floats to position your standard structure and then use position if/when needed for breaking box models, placing items ontop of one and another etc.

 

Here is a good reference: http://css.maxdesign.com.au/floatutorial/

 

 

Thanks for replying, yeah I tried to use float to shift an object to the left/right but usually have to resort to using position as the float does not seem to have any effect.

 

But thanks for the reference.