2 colonnes Div Layout: réalisation d'une colonne de droite fixe et d'une colonne de gauche fluide

Challenge:

Création Une disposition à deux colonnes où la colonne de droite a une largeur fixe tandis que la colonne de gauche s'adapte dynamiquement à l'espace disponible. Implémentez la mise en page à l'aide de float et de marge, mais rencontre des problèmes.

Solution:

Pour établir une colonne de droite fixe tout en maintenant la fluidité dans la colonne de gauche, suivez-les Guidelines:

supprimer le float sur la colonne de gauche:

Réorganiser les colonnes html: [
1. réorganiser les colonnes html: [ Placez la colonne de droite (#Right) avant la colonne de gauche dans le code HTML. Cela garantit que la largeur de la colonne de droite est appliquée en premier.
2. Appliquer le débordement à la div extérieure: Ajouter un débordement: caché et une hauteur (par exemple, hauteur: auto) à l'extérieur div (div. récipient). Cela empêche les divs intérieurs de déborder le conteneur.
3. Définissez la largeur de la colonne gauche et débordez: Définissez la largeur de la colonne de gauche sur Auto et ajoutez un débordement: Hidden. Cela permet à la colonne de remplir l'espace restant et empêche l'interaction avec la colonne de droite.
4. Exemple de code:

html: &&&]

  

    Right content with fixed width
  
  

    Left content with flexible width
  

  

    Right content with fixed width
  
  

    Left content with flexible width