css équivalent de : " width: 100%-210px; "Résolu/Fermé

Question

Bonsoir,       
Un double-casse tête qui ne devrait probablement pas en être un, mais là, je sèche.       
1. Je veux un div qui fasse toute la largeur de ma fenêtre moins 210px.        
2. Je veux aligner en bas à gauche de mon body un autre div.       
Est-ce possible en css ?       


 ______________________ width 100% _____________________
|                                                       |
|                         top                           |
|                                                       |
|_______________________________________________________|
|               |                                       |
|               |                                       |
|               |                                       |
|               |                                       |
|    menu       |                                       |
|               |                                       |
|               |                                       |
|               |                                       |
|___ 210px _____|                 contenu               |
                |                                       |
                |                                       |
                |                                       |
                |                                       |
                |                                       |
                |                                       |
 _______________|                                       |
|               |                                       |
|  bottom-left  |                                       |
|               |                                       |
|               |                                       |
|___ 210px _____|_____________ 100%-210px ______________|


contenu       
Je ne peux pas mettre "menu" en float:left car sinon "contenu" s'aligne complètement à gauche sous "menu".       
Je ne peux pas jouer sur les padding, les margin ou une position:absolute car sinon la largeur de mon contenu déborde en dehors de la fenêtre.       
Je ne peux pas non plus faire width:100%-210px, vous vous en doutez, ça ne marche pas.       

bottom-left       
J'ai essayé d'imbriquer "menu" et "bottom-left" dans un div avec height:100% (du body?), pour mettre "bottom-left" en bottom:0px, mais ça n'a pas marché       

Merci d'avance pour vos conseils

Dj Nam · Answer

Bonsoir,

Pour la première question, concernant la largeur de 100%-210px;
tu as trois solution :

1) donner une largeur fixe, en pixels à ta balise body, et calculer la différence.
2) Créer un fichier HTC qui contiendra du code javascript pour faire le calcul.
3) Le faire directement en javascript

Pour la seconde question,
Soit tu mets un margin-top à ton cadre botom-left en pourcentage. Soit tu reprends les solutions 2) et 3) de la questions d'avant.

Pour le HTC, je pense que tu saura ou chercher.

jemsss · Answer

Merci pour tes conseils,

Question1: j'ai bien pensé à avoir recours à javascript, mais j'osais espérer qu'il y ait une solution avec du pur css (vive les bons vieux tableaux, ça me tente!).

Question2: je viens de faire des tests avec les pourcentages en margin-top mais j'ai de la peine à comprendre ce que ça me rapporte.

...

jemsss · Answer

J'ai enfin trouvé la solution avec uniquement du CSS ! Contenu Il faut mettre "contenu" dans une autre div avec height:100%. Puis mettre au div "contenu" margin-left:210px et margin-right:0px. bottom-left Je crée un div "page" qui contient tous les div du body. Je place "bottom-left" en position absolue en bas de "page". Je place "menu" en position absolue dans "page". Je mets une hauteur mini à "contenu" pour que "bottom-left" ne se superpose pas avec "menu" (avec un petit hack pour IE6 qui ne reconnaît pas min-height) Cette page m'a beaucoup aidé : http://www.couzinhub.com/mar-09/colonnes-de-m-me-hauteur-avec-css Code CSS div#top { position: absolute; top: 0px; width: 100%; height: 120px; min-width: 770px; } div#page{ position:relative; } div#contenu_large { width: 100%; } div#contenu { margin-left: 210px; margin-right: 0px; padding-top: 125px; min-width: 560px; min-height: 530px; } /* hack pour ie6 */ * html div#component { width: 540px; height: 530px; } div#menu { position: absolute; top: 125px; width: 210px; } div#bottomLeft { position: absolute; bottom: 0px; width:210px; } Code HTML

Css équivalent de : " width: 100%-210px; "

3 réponses

Discussions similaires

Newsletters