What Is The Biggest Cons to Use Position: Absolute & Top/Left Over Float & Margin+Padding, If Site Is Fixed Width (970Px), Centered

Which is preferred oldest browser and shortest Screen Size of mobile to test website and which has Facility to surf Internet and still in use?

Take a look at what devices are used for surf Internet (sorry for Russian, that site doesn't seem to have English UI - but it's pretty self-explanatory) - you'll probably be amazed how many people still use "feature phones" with fairly small screens and Opera Mini (Java ME-based) to surf. While touch-based smartphones (such as iPhone) slowly grow, more than 50-60% of total mobile users still use fairly small screens and simple devices.

how to put a side navigation button above the side nav

If you want to make it sticky and above all your other content, you can simply add margin to your entire body element and set your toggle button to a fixed position:

body {
  margin-top: 3rem;
}

#menu-toggle {
   position: fixed;
  left: 0.5rem;
  top: 0.5rem;
}

Edit: As pointed out in comments, fixed position is not the best approach, so the other way will be to just add a simple wrapper div ontop of your layout and place a toggle button into it, no additional css rules required.

<body>
    <div class="p-2">
        <a class="btn btn-link" role="button" href="#menu-toggle" 
id="menu-toggle"><i class="fa fa-bars"></i></a>
    </div>
    <div id="wrapper">
        <div id="sidebar-wrapper">
           ...

Working example

How can I center an absolutely positioned element in a div?

<body>  <div style="position: absolute; left: 50%;">    <div style="position: relative; left: -50%; border: dotted red 1px;">      I am some centered shrink-to-fit content! <br />      tum te tum    </div>  </div></body>

Fixed position but relative to container

Short answer: ~~no.~~ (It is now possible with CSS transform. See the edit below)

Long answer: The problem with using "fixed" positioning is that it takes the element out of flow. thus it can't be re-positioned relative to its parent because it's as if it didn't have one. If, however, the container is of a fixed, known width, you can use something like:

#fixedContainer {
  position: fixed;
  width: 600px;
  height: 200px;
  left: 50%;
  top: 0%;
  margin-left: -300px; /*half the width*/
}

http://jsfiddle.net/HFjU6/1/

Edit (03/2015):

This is outdated information. It is now possible to center content of an dynamic size (horizontally and vertically) with the help of the magic of CSS3 transform. The same principle applies, but instead of using margin to offset your container, you can use translateX(-50%). This doesn't work with the above margin trick because you don't know how much to offset it unless the width is fixed and you can't use relative values (like 50%) because it will be relative to the parent and not the element it's applied to. transform behaves differently. Its values are relative to the element they are applied to. Thus, 50% for transform means half the width of the element, while 50% for margin is half of the parent's width. This is an IE9+ solution

Using similar code to the above example, I recreated the same scenario using completely dynamic width and height:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
}

If you want it to be centered, you can do that too:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Demos:

jsFiddle: Centered horizontally only

jsFiddle: Centered both horizontally and vertically

Original credit goes to user aaronk6 for pointing it out to me in this answer

Center a position:fixed element

If your div has a known width and height, then you basically need to set top and left to 50% to center the left-top corner of the div. You also need to set the margin-top and margin-left to the negative half of the div's height and width to shift the center towards the middle of the div.

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */

Or, if your div has a dynamic/undefined width and/or height, then instead of the margin, set the transform to the negative half of the div's relative width and height.

position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Or, if your div has at least a fixed width and you don't care about centering vertically and old browsers such as IE6/7, then you can instead also add left: 0 and right: 0 to the element having a margin-left and margin-right of auto, so that the fixed positioned element having a fixed width knows where its left and right offsets start. In your case thus:

position: fixed;
width: 500px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;

Again, this works only in IE8+ if you care about IE, and this centers only horizontally not vertically.

Why do I get a different result from setting translate to -50% and setting margins to 50%?

There is no problem in your method. Both will try to center based on the values you provide.

The margin method fails cos you aren't using a Box Sizing method like so.

box-sizing: border-box

This results in all your elements to be larger than the height and width specified. Without this, you are telling the browser to add any padding or border to both width & height.

And so your larger element shifts when using using the margin method.

You've set a 2% padding on style-x, and a width of 38vw on #main. When using margins to center things, you would need to account for these varying values.

When you set a percentage padding, its calculated based on the width of the containing block.

The transform method on the other hand, uses the bounding box of the containing block and has no problem centering a larger element.

I'd suggest you include this box-sizing on main and style-x if using the margin method. You could just use

*, after, before {
  box-sizing: border-box;
}

This gives better control over dimensions across all elements.

How does one have centered text and right-floating text on the same line, when everything has dynamic widths?

Try this:

<div class='content' style="width: 50%; padding: 15px; text-align: center; position: relative">
    <div class="noDown" style="position: absolute; right: 0;">ASDF!</div>
    Lorem ipsum...
</div>

JsFiddle Test: http://jsfiddle.net/3Y7ty/2/