Deux colonnes flottantes – une fixe, une largeur libre

J’ai regardé autour de SO , mais je ne peux pas en trouver un qui corresponde à mon occurrence, j’ai essentiellement deux colonnes une largeur fixe (185px) et l’autre colonne n’a pas de largeur fixe, mais j’ai besoin de la dernière colonne pour remplir le dernier espace

 ........................................... .--------- ------------------------------. .+ + + +. .+ + + +. .+ + + +. .+ + + +. .+ + ------------------------------. .+ + . .+ + . .+ + . .--------- . ........................................... 

La première colonne doit toujours être à 100% en bas lorsque la deuxième colonne remplit la largeur restante, elles sont toutes deux flottées à left , si je redimensionne la fenêtre du navigateur, la deuxième colonne apparaît sous la première colonne. J’ai besoin de la deuxième colonne pour remplir la largeur restante et être flexible lors du redimensionnement de la fenêtre du navigateur.

Regardez ça . Il n’y a pas de démos, mais j’ai déjà utilisé des tutoriels de ce type, donc je suppose que ça marche bien. Je comprends de l’article que le contenu principal est liquide. Le contenu latéral peut également être liquide, mais je pense que vous pouvez simplement lui donner une largeur fixe et en restr là. L’astuce ici est de placer le contenu principal en premier.

Il existe en fait un moyen plus simple de le faire que d’utiliser des flotteurs:

 .container { position: relative; } .left { width: 185px; position: absolute; top: 0; left: 0; } .right { margin-left: 185px; } 

En utilisant les marges négatives de ce tutoriel, le CSS peut ressembler à ceci

 html, body, .container { height:100%; padding:0; margin:0; } .container { min-width: 300px; } .left { float:left; width: 185px; margin-right: -185px; height:100%; } .right { margin-left:185px; } 

http://jsfiddle.net/Y5FAT/1/

http://jsfiddle.net/Y5FAT/

Édité la solution, cette fois en utilisant flexbox, a rendu la colonne de gauche en utilisant flex: 185px 0 0; puis fait la croissance automatique de la colonne droite en utilisant flex-grow:1

 *{ box-sizing: border-box; } body{ padding:0; margin:0; } #container{ display:flex; } #left{ height: 100vh; flex: 185px 0 0; background-color:tomato; } #right{ flex-grow: 1; } #right > div{ background:pink; } 
   
Left

Si vous ne voulez pas utiliser ni les flottants ni le positionnement absolu, le plus simple que j’ai pu trouver était

        
left
right

Eh bien, la réponse approuvée est une bonne, mais pour ceux qui recherchent plus, voici un lien. Espérant que ceci puisse t’être utile. 😉

http://www.dynamicdrive.com/style/layouts/category/C13/

La “position: absolue” La réponse est plutôt bonne, mais elle a des implications sur tous les navigateurs, surtout si vous développez pour IE. La meilleure façon d’y parvenir est la suivante:

      

S’il vous plaît noter que la div dont vous avez besoin sur le côté droit est appelée en premier dans le HTML. Notez également la suppression du flottant après les colonnes, ce qui sera utile si vous avez du contenu ci-dessous ou s’il existe un conteneur parent.

J’avais essayé presque toutes les solutions ci-dessus jusqu’à ce que je tombe sur cela, et cela fonctionne à merveille pour moi. Comment faire un div pour remplir un espace horizontal restant (un problème très simple mais ennuyeux pour les experts CSS)

Vous ne savez pas pourquoi, il semble que vous ayez seulement besoin de faire flotter la colonne qui a une largeur fixe. Le rest ne fait que tomber.