Comment placer les div côte à côte

J’ai un div wrapper principal qui est défini à 100% de la largeur. A l’intérieur, j’aimerais avoir deux divs, l’un de largeur fixe et l’autre qui remplit le rest de l’espace. Comment puis-je faire flotter le deuxième div pour remplir le rest de l’espace. Merci pour toute aide.

Il y a plusieurs façons de faire ce que vous demandez:

Utilisation de la propriété CSS float :
```
   Left 
  Right 
  
```
Utilisation de la propriété d’ display CSS – qui peut être utilisée pour créer des div comme un table :
```
    Left 
  Right 
 
  
```

Il y a plus de méthodes, mais ces deux méthodes sont les plus populaires.

CSS3 a introduit des boîtes flexibles (aka. Flex box) qui peuvent également réaliser ce comportement.

Définissez simplement la largeur du premier div, puis atsortingbuez au second une valeur de 1 flex-grow qui lui permettra de remplir la largeur restante du parent.

 .container{ display: flex; } .fixed{ width: 200px; } .flex-item{ flex-grow: 1; }

jsfiddle démo

Notez que les boîtes flexibles ne sont pas rétrocompatibles avec les anciens navigateurs, mais constituent une excellente option pour cibler les navigateurs modernes (voir aussi Caniuse et MDN ). Un excellent guide complet sur l’utilisation des boîtes flexibles est disponible sur les astuces CSS .

Je ne connais pas beaucoup les stratégies de conception HTML et CSS, mais si vous recherchez quelque chose de simple et qui s’ajustera automatiquement à l’écran (comme je le suis), la solution la plus simple consiste à faire en sorte que les divs se comportent comme des mots. un paragraphe. Essayez de spécifier l’ display: inline-block

  Content in column A 
  Content in column B

Vous pourriez avoir besoin ou non de spécifier la largeur des DIV

J’ai inclus une couleur de fond dans cet exemple pour aider à montrer où sont les choses – et aussi quoi faire avec le contenu sous la zone flottante.

Ne mettez pas vos styles en ligne dans la vie réelle, extrayez-les dans une feuille de style.

  Left 
  Right 
 Below

JSFiddle

Donner au premier div un flotteur gauche et fixe avec, le second div 100% largeur un flotteur gauche. Cela devrait faire l’affaire. Si vous souhaitez placer des éléments en dessous, vous avez besoin d’un élément clair: les deux sur l’article que vous souhaitez placer ci-dessous

Si vous n’indiquez pas IE6, faites flotter le second

et donnez-lui une marge égale (ou peut-être un peu plus grande que) à la largeur fixe du premier

HTML:

   lorem ipsum 
  dolor sit amet

CSS:

 #main-wrapper { 100%; background:red; } #fixed-width { width:100px; float:left } #rest-of-space { margin-left:101px; /* May have to increase depending on borders and margin of the fixd width div*/ background:blue; }

La marge tient compte de la possibilité que le «rest de l’espace»

puisse contenir plus de contenu que celui de la «largeur fixe»

Ne donnez pas la largeur fixe à un arrière-plan; Si vous devez visiblement les voir comme des «colonnes» différentes, utilisez le truc Faux Colonnes .

   Sidebar 
  content

Ce sera compatible avec tous les navigateurs. Sans la marge à gauche, vous rencontrerez des problèmes avec le contenu en cours d’exécution à gauche si votre contenu est plus long que votre barre latérale.