Aide à la mise en page CSS dynamique

Question

J'essaie de créer une mise en page CSS unique qui devrait être très élastique. Par cela je veux dire que j'ai une disposition de 3 colonnes avec l'en-tête et le pied de page tous dans un conteneur et centré. J'ai choisi de le faire dans un conteneur parce que je voulais le rendre approprié pour les graphiques. Par conséquent, le conteneur me permet de changer la résolution très rapidement.

Dans le conteneur, j'ai fait une disposition de 3 colonnes en utilisant float, parce que je veux cet effet lorsque vous diminuez la résolution, ou la fenêtre du navigateur, où le div centre et droit réordonnent sur le côté gauche. De cette façon, la page serait très élastique et le navigateur, la résolution, et même compatible appareil mobile.

J'ai fait ce que je croyais être la disposition parfaite, mais il y a un problème majeur que je ne sais pas comment résoudre.

J'ai donc une colonne de gauche (menu) flottant à gauche avec l'ensemble de largeur (pour que les futurs boutons CSS aient la même taille). Ensuite, j'ai le contenu principal div, flotté aussi à gauche, avec max-largeur définie pour rendre le navigateur pour le faire flotter à côté du menu. Sans largeur, il est flottant sous le menu div. Et enfin, j'ai la colonne droite div également avec la largeur définie et flotté à gauche. Quand j'ai suffisamment de texte dans le contenu div, cette mise en page est parfaite.

Mais lorsque le texte n'est pas assez large, le contenu div diminue, et fondamentalement ruine la mise en page car tout se déplace vers la gauche et laisse beaucoup d'espace au côté droit du conteneur. J'espérais peut-être qu'il y avait une astuce pour le rendre plus large sans avoir besoin de le fixer à une largeur fixe car alors il perd l'effet élastique car dès que le navigateur atteint le contenu div une barre de défilement horizontale apparaît et je ne veux pas Cela arrive si vite.

J'ai essayé de le régler sur la largeur en pourcentage, mais cela semble étrange.

Ma mise en page est hébergée here, on my school webserver, et c'est une version légèrement plus ancienne avec droit div flottant à droite, mais sinon, comme je l'ai décrit.

S'il vous plaît, s'il y a une certaine façon de css, dites-moi. Merci.

Answer 1

Pourquoi le contenu du centre doit-il être flottant? Si vous avez fait flotter le div gauche, le droit div inclut le contenu du centre, il devrait descendre au milieu d'eux. Vous pourriez vouloir mettre le tout dans un conteneur div pour limiter la largeur maximale.

Answer 2

Utiliser des pourcentages

#left_menu{ width:15%; } 
#content{ width:72.5%; } 
#right_menu{ width:12.5%; } 

---

Mise à jour

Si vous voulez gauche et à droite à fixer et seul le centre de flotter puis mettre le divs gauche et à droite à l'intérieur du centre. Position relative par rapport au centre, et absolu à gauche et à droite.

exemple à http://www.jsfiddle.net/gaby/mBuf9/