I am thoroughly confounded. I tried very hard to conquer this on my own - I feel like I keep falling back to the superb advice here to fix issues for me. But this probably deceptively simple issue has destroyed me...

In site 1.0 I used absolute positioning to center my objects. That was great, but obviously wasn't consistent between browsers/devices.

Code:

position:absolute;
left:159px;
top:0px;

In version 1.1 I used

Code:

margin-left: auto ;
margin-right: auto ;

to center all my elements. Great! They center automagically.

However...

Everything would vertically position however it pleased.

So:

Code:

margin-top:[x]px;

Arranges things nicely. Yay!

Then...

The site loads. The site logo loads in its proper spot, at the top of the page. After a slight delay, a script does it's thing and fades in a vimeo container. The logo jumps to the bottom of the page! Everything goes all crazy! No!

Good UI folks learn how to use div's as wrappers which define regions of a web page which then define wells inside, which then define columns and rows inside of that, and specific content inside of those. Use additional wrappers when multiple rows/columns or regions are in groups so you can establish control in layout and positioning of major elements.

Think of a page from the top left flowing to the right and down, all the way to the bottom right. That's the default document flow. If you just set a bunch of div's in sequence, they'll flow that way. But position absolute places elements outside that the document flow entirely, so things will either move around or display out of sequence or even on top of each other as they still naturally flow within the document. Float also affects the document flow as well, i.e. if elements should allow other elements to exist to the left or right thus changing the default document flow. Other styles help clear floats and restore or remove document flow, i.e. clear:both; float: none, and still others allow positioning within its current container, i.e. position: relative.

Grasp this basic concept in your mind and all the commands and properties begin to suddenly make sense. They simply affect style or positioning within the document flow.

Due to cross-browser support issues some CSS styles or combinations do not render the same between browsers, so hacks exist - but honestly if you design your page properly (divs, containers, know how to float/position and maintain document flow) you will require far less hacks and your sites will render far better between browsers.

Efrem is right, create a stylesheet (ie stylesheet.css) and link it inside your header using this line of code:

Code:

<link rel="stylesheet" href="css/stylesheet.css">

That way you can put all the css inside 1 separate document so that your html file isn't cluttered.

The choice between internal and external style sheets is a separate issue. External style sheets are great when you plan to use the same styles on several pages, either to give a site a consistent look and feel or just to save rewriting. However, if one is learning CSS and only has one page, an internal style sheet is probably easier to start with.

(When and if you go to external style sheets, remember that they don't use <style> </style> tags to enclose the rules.)

The choice between internal and external style sheets is a separate issue. External style sheets are great when you plan to use the same styles on several pages, either to give a site a consistent look and feel or just to save rewriting. However, if one is learning CSS and only has one page, an internal style sheet is probably easier to start with.

(When and if you go to external style sheets, remember that they don't use <style> </style> tags to enclose the rules.)

Even if 1 page I'd still work on an external stylesheet. It's the way things are being done now and if he/she ever chooses to help someone out with their site 9/10 it will more than likely be external. So knowing how to navigate through that is probably the best choice from the beginning.