Comment puis-je aligner une barre latérale à gauche de la zone de contenu principal?

Salut à tous, donc en gros j'ai une question très simple de mise en page avec une image d'en-tête, l'un des principaux centré sur la zone de texte. Et une barre de menu qui est à gauche de la principale centrée sur la zone de texte.
C'est fondamentalement la façon dont ma mise en page ressemble:

<center>Header</center>
<div style="float:left;">Sidebar</div>
<center>Main Area</center>

Bien la barre latérale est évidemment à aligner tout le chemin vers le côté gauche de la page, ce que je tiens à faire est de toujours être sur le côté gauche de la page, mais je veux qu'elle "hug" le principal centré sur la zone.

Voici une image de base de ce à quoi il ressemble maintenant, et une flèche de ce que j'aimerais faire:
http://img18.imageshack.us/img18/2307/exampleps.jpg

Évitez d'utiliser le centre de l'élément, il est obsolète. Aussi, vous pouvez trouver jsfiddle.net utile pour le partage de votre code.

OriginalL'auteur MJ93 | 2011-02-06

  1. 6

    Démo Live: http://jsfiddle.net/rRm7k/

    HTML: 

    <div id="wrap">
    <div id="header"> HEADER </div>
    <div id="body">
        <div id="sidebar"> SIDEBAR </div>
        <div id="main"> MAIN CONTENT </div>        
    </div>
</div>

    CSS: 

    #wrap { width:500px; margin:0 auto; }
#body { overflow:auto; }
#sidebar { float:left; width:150px; min-height:400px; }
    sympa, mais l'id est comme le corps d'en-tête sont à confusion
    Je voudrais faire ces changements, si je devais mettre en œuvre la présente aujourd'hui: 1. sémantique <header>, <aside>, <main> éléments; 2. un Flexbox mise en page; 3. un mobile-premier réactif de mise en page à l'aide de requêtes de média (barre latérale s'effondre au-dessus ou au-dessous de contenu principal)

    OriginalL'auteur Šime Vidas

  2. 0

    Essayer avec tous les divs:

    <div>Header</div>
<div style="float:left;width:250px">Sidebar</div>
<div style="float:right;">Main Area</div>
    mais j'ai besoin de la principale zone d'en-tête et d'être centré.. je dois l'en-tête et la zone principale à l'intérieur de la div
    Essayez de centrer le milieu à l'aide des barres de navigation gauche et droite. On peut être vide. Ou ajouter une taille appropriée de la marge à droite de la zone principale.

    OriginalL'auteur James Love

  3. 0

    Voici une solution: http://jsfiddle.net/MwEun/1/

    Vous avez à s'adapter à la largeur des éléments à vos besoins, mais devrait fonctionner. Cet exemple est vraiment une version de base d'un vraiment facile de mise en page html.

    Un bon et solide de roche solution pour le centrage des éléments est de définir une largeur (par exemple, 500px) et en ajoutant des margin: 0 auto;

    OriginalL'auteur gearsdigital