Hello! I'm going to post a link to a site that's going up. It looks alright, unless you start resizing the page and then all the elements/divs start going crazy and ruins the consistency of the design. Could someone please suggest how I can keep everything in place regardless of zooming in/out or resizing the page. Notice that's only the top half of the page and everything in the layout on the bottom stays the same.

Many thanks for any suggestions! The site is www.indevelo.com

Wow... just... I can't get my head around it. Your CSS and JS is all over the place.

For a starters, try to get rid of all these position:absolute and margin: 5billion px. You should be able to fix most of your issues by using align:center and float:left etc.

Second, get yourself firebug for firefox, and start looking at the code you are producing.

I tried to write down all the changes you need to make, but I ran out of time.

Have you tried margin: 0 auto;?

Heres how you do things alright. What you have is junk.
Use an external stylesheet - Must for professionals.

Break down everything into: Header, Body, Sidebar ( If Applicable ) and Footer.

Now name everything in your header like this: <div id="header" class="Facebook"> or <div id="body" class="post">. Hopefully you get the point.

Now heres how you would build a header. Take all the components you want the Facebook image, Twitter, and navigation then break them down.

Heres how I would build your header. Wrap one div around the navigation/ background image/ then twitter facebook.

Keep in mind for auto margins to work you have to specify the width. Then I would set the main divs that wrap around the entire content to Auto. That way everything will always be in the center.