Efectivamente lo hace desaparecer por la izquierda. ¿Para qué se ha usado en el ejemplo de la plantillas que pusiste?:
div#wrapper{float:left;width:100%}
div#content{margin: 0 200px}
div#navigation{float:left;width:200px;margin-left:-100%}
div#extra{float:left;width:200px;margin-left:-200px}
<div id="wrapper">
<div id="content">
</div>
</div>
<div id="navigation">
</div>
<div id="extra">
</div>
Pues si te fijas, lo que hace es en primer lugar posicionar la caja del centro (content), dentro de wrapper, que tiene un ancho del 100%. Como todas las cajas están con float left, al colocar la segunda caja (la de la izquierda, navigation), si no le diera margen desaparecería por la derecha de la pantalla, de manera que con un margen izquierdo del 100% aparece situada a la izquierda, donde quiere que aparezca.
Después coloca la de la derecha (extra) y de la misma manera desaparecería por la derecha porque no tiene sitio, entonces le da un margen izquierdo de 200px (igual al tamaño de esa caja), y así se situa a la derecha.
Esto estoy seguro de que lo ha hecho así por accesibilidad, para que el texto aparezca en el flujo del documento en orden y si alguien viera la página con un navegador de texto o con css desactivado (o una hoja de estilo auditiva), el texto aparecería en el orden de lectura correcto (correcto en su caso, porque ha numerado cada bloque diferente con 1, 2 y 3, que no tendría por qué ser así obligatoriamente).
Cuando se pone una caja con float right, se debe poner antes que las que van a la izquierda (como en mi ejemplo), por eso se rompe el orden real de lectura (el suyo).
Espero haberte aclarado algo.
Mikel.
