Layout of pages - absolute positioning

Question

Afternoon all - I'm after a bit of advice really.

Being a newbie, I now realise that the method I employed to design my first project is a bit crap. Having little/no knowledge of anything to do with web development, I went down the route of placing my controls on a page with absolute positioning...I just liked the idea of dragging and dropping really!

Anyway, I now realise that this wasn't the greatest idea I ever had given the fact different users will have different resolutions and wot not - what I see isn't necessarily what they will be seeing.

How would I go about amending my code so that the same layout/spacing between controls is maintained but is generally centered?

Would I have to enclose all my current controls in a table or container of some sort and then align this? Alternatively, is it the case of stripping the absolute positioning out entirely and pretty much start from scratch?!

Any thoughts or ideas would be gratefully received.

(PS: Please go easy on the abuse!!!)

Answer 1

Create a wrapper, this is the width you want everything to be. Inside this you put everything else; your header, content, footer and inside this you can position the "right" way. You should avoid absolute positioning as much as possible, relative is the way to go and with wrappers you can easily do this.

So if you create a 1000px wrapper and you want your header to be 200px from the left, you don't have to worry about different resolutions; they will always see it displayed 200px from the left of the 1000px, which you can centre on the page.

Take a look at: https://www.adobe.com/devnet/dreamweaver/articles/css_concepts_pt3_04.html and http://www.communitymx.com/content/article.cfm?cid=A8BBA

:)