Gauche div 200px de largeur, le contenu de la div le reste?

body {
                font-family: Arial, Helvetica, sans-serif;
                font-size: 13px;
            }

            #wrapper {
                padding: 1px;
                margin: 0 auto;
            }

            #left {
                width: 200px;
                float: left;
                background: orange;
                position: fixed;
                text-align: center;
                padding: 2px;
            }

            #content {
                float: right;
                text-align: left;
                padding: 2px;
                width: ???;
                background: #F0F0F0;
            }

Bonjour à nouveau stackoverflow!
Je veux créer une mise en page simple, avec un menu à la largeur de 200px, et le contenu de la div qui prend le reste de la largeur... Mais comment puis-je le faire?

J'ai déjà cherché sur google et sur d'autres stackoverflow sujets, mais je ne pouvais pas trouver quoi que ce soit...

Salutations

Edit: j'ai essayé de chercher sur goolge une fois de plus et j'ai trouvé un exemple de la façon dont il devrait ressembler à:
http://www.thesitewizard.com

Mais parce qu'il a quelque peu étrange div noms, je ne sais pas quel est le code qu'il utilise pour ce div...

Comment sur l'utilisation de pourcentages ? - à gauche largeur 20%) et le contenu de la largeur de 75% avec 5% de gouttière entre
Non, cela semble étrange dans différentes largeurs d'écran...

OriginalL'auteur Thew | 2011-02-20

  1. 29

    Vous pouvez travailler avec flotteur en combinaison avec de la marge pour atteindre le résultat souhaité. Pour obtenir ce que vous voulez que votre HTML-structure devrait ressembler à ceci:

    <div id="wrapper">
    <div id="menu">place your content here</div>
    <div id="main">place your content here</div>
</div>

    Le minimum requis CSS devrait ressembler à ceci:

    #menu { float: left; width: 200px; }
#main { margin-left: 200px; }

    J'ai ajouté un démo sur jsfiddle pour afficher les résultats à l'aide de couleurs d'arrière-plan.

    margin-left: auto; serait dans ce cas, la meilleure approche, vous n'avez pas besoin de répéter 200px

    OriginalL'auteur

  2. 1

    Que sur l'utilisation de display:table, display:table-row, display:table-cell éléments?

    jsFiddle ici: jsFiddle

    display:table est désormais pris en charge dans tous les navigateurs, donc, en 2013, je voudrais utiliser ce

    il est obsolète, display: flex; est la nouvelle approche (Nov'15)

    OriginalL'auteur

  3. 0

    vous pouvez utiliser 

    width:100%;
padding-left:200px;
float:right;

    pour le #contenu et

    width:200px;
float:left;
padding-left:-200px;

    pour la #gauche

    OriginalL'auteur

  4. 0

    Je suis surpris que personne n'a répondu avec CSS: flex à ce point

    display:flex;

    Pour un tutoriel sur toutes les façons dont vous pouvez utiliser cette propriété, essayer flexbox froggy

    OriginalL'auteur