Geckozone

Bonjour à tous,

Je cherche à faire quelque chose de simple dans l'idée, à savoir un div à gauche contenant du texte et un div à droite contenant du texte aussi. Là où ça se complique c'est que je veux que le div de gauche ai une largeur variable et que celle de droite en ai une fixe. Je fais donc un width:220px pour celle de droite, mais pour celle de gauche que faire ? sachant que je voudrais que le div récupère toute la largeure disponible tout en laissant la div de droite à sa place.

En fdiv j'ai quasiment du tout essayé (diverses combinaisons de float, display, width...). Et rien à faire, soit la colonne de gauche est fixe en largeur soit elle prend 100% de l'écran relayant celle droite en dessous.

Avec un tableau c'est tou simple, il suffit de faire un tableau avec une ligne et deux colonnes, je met 220px de largeur à celle de droite et width=* à celle de gauche (* voulant dire prendre ce qu'il reste).

Comme les tableaux ne sont pas sensés être utilisés pour la mise en page, j'aimerais si il existe une solution en div/css, voir si il existe un équivalent à * des tableaux. Sachant que width:auto; = width:100%; (d'ailleurs je crois que dans le W3C CSS 2.1 ils vnt faire en sorte que le width:auto; corresponde au principe de * des tableaux, mais en attendant on fait comment ?).

Merci beaucoup par avance pour vos réponses.

essais ceci :

http://openweb.eu.org/articles/initiation_float/

Héhé, déjà lu

Faut pas croire, si je pose la question ici c'est que j'ai déjà fouillé le forum et lu pleins de cours de css dont celui-ci que tu as déjà recommandé à un autre forumeur

.

En fait je pense qu'il n'y a pas de solution propre à se problème (un tableau ou du javascript c'est pas trés propre pour du positionnement), mais je pose la question à tout hasard comme il y a des gens plutôt fort dans le coin.

De toute façon, il y a un problème rien que dans ton raisonnement

C'est comme si tu essayais d'écrire un morceau de phrase sans mettre la fin et que cette fin doit se completer ... La meilleure manière est soit : tout définir en fixe ou tout définir en variable (% voire également l'utilisation du em).

Je te conseille plus le em puisque l'écriture pourra suivre. Si tu trouves néanmoins une solution, j'en suis preneur

Et si tu rajoutes un margin-right à ta partie de gauche?
Avec ce code, j'obtiens ce que tu veux (enfin ce que je pense que tu veux obtenir

)

Code : Tout sélectionner

<html>

<head>
<style type="text/css">

.droite{
  background-color: #BB0000;
  float: right;
  width: 220px;
}

.gauche{
  background-color: #00BB00;
  margin-right: 220px;
}

</style>
</head>

<body>
<div class="droite">
  Some text...
</div>
<div class="gauche">
  Some text...<br><br>Some more text...
</div>
</body>

</html>

sinon j'ai trouver ceci :

Code : Tout sélectionner

<html>
<head>
<style>
.jaune {
background-color: #ffff00;
float: right;
width: 220px;
margin: 0;
  height: 100%;
}
.verte {
background-color: #00ff00;
margin: 0;
  height: 100%;
}

.boite{
  height: 20%;
}

</style>
</head>
<body>
    <div class="boite">
      <div class="jaune">Une boîte jaune flottant</div>
      <div class="verte">Une boîte verte doté d'un contenu plus long... mais alors vraiment tres long car je mai s nqm sidf nfdskf sndfk sdfh sdfhsd fh</div>
    </div>  
    
</body>
</html>

@Xethorn, il n'y a pas de prob dans mon raisonnement, mon menu droite est celui avec les liens, ce serait idiot de le mettre en pourcentage (comme je l'ai vu sur certains sites), parce qu'avoir un menu plus large que prévu n'apporte rien et n'est pas esthétique. Inversement la colonne contenant le contenu des pages gagne à être plus large d'après l''écran puisque cela permet de voir ls articles de manière plus confortable. C'est pas toujours évident à mettre en oeuvre, mais je pense qu'il faut penser éfficacité d'utilisation avant facilité de programmation

@Athropos, trés bonne idée ta solution, éffectivement ça marche

. Je suis vert de ne pas y avoir pensé :p

@Jv2759, éffectivement ta solution fonctionne aussi, par contre quand je la met en oeuvre sur mon site ça ne marche pas ^^. Sans doute quelque chose que j'ai mal fait et que je n'ai pas vu. Enfin ce n'est pas grave, avec la solution d'Athropos je suis déjà arrivé à quelque chose.

Maintenant il ne me reste plus qu'à me dépatouiller avec mes problèmes de compatibilité ie (quel sacré farceur ce ie quand même :p). En tout cas merci beaucoup à tous pour m'avoir aidé !

Geckozone

Placement de div cote à cote

Placement de div cote à cote