The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Positioning with CSS

Hi, I'm working on a layout for my new site www.destroi.com, I decided I would try and incorporate abit of CSS and it was working great until I showed the site to a few friends. View what I'm working on by visiting:

OK. Don't worry. I will do some testing and give you an answer... the only thing that I need to know is how is supposed to look, because you have been doing changes all the way around, and each time I look at it, it's different. Kind of confusing for me

Two things you need to understand about absolute positioning:
1. elements that are AP are taken out of the normal flow of the document which means elements around them have no awareness that they're there.
2. AP elements take their coordinates from the window in the absence of a parent element with either position: relative/absolute applied.
For some further reading.

So finally, that's how is supossed to look... Don't want to burst your bubble, but are you sure that you are happy with your code? while it is clean, it could be improved so much!

I understand that, if you normally use tables, you get them to work and you understand them... but why stop there?

You use transitional instead of strict doctype. Transitional were meant to provide backwards compatibility with older sites. All new pages should be built using strict doctype (basically, it means that you separate structure from styling)

You use quite a bit of superflous code (not including the tables, which have their share of empty cells). Example: Have you tried to use a list for your navigation? It would be easier than using so many br's...

You could save bandwidth if you slice your images in a different way...

The complexity of your layout (to make it liquid) comes from the amount of curves you use.

Have you tried to make it tableless? It is not that hard, and the amount of tags that would be reduced greatly.

Think about it, very specially if you are going to do the maintenance of the site. It may hard at the beggining, but it will save you bandwith and time.

Now, about positioning...

As Tyssen said, when you position something you take it out of the normal flow (that also occurs with floats).

The normal flow is the place where the element would be seen if we haven't changed its position.

When you are positioning an element, the browser calculates the new positioning based on:

a) Absolute positioning : the top left corner of the FIRST POSITIONED ANCESTOR (or the root element, which could be either the body or the html element, if there is not an ancestor with a position property)

b) Relative positioning : the top left corner of the box that would have been created if the element wasn't moved.

When we use an absolute position, the gap that would represent the place of that element in the normal flow is filled with any content included in the code after that element.

When the position is relative, the gap is not filled, stays there. The element is simply offseted from its normal place.