[CSS] trois colonnes dont une avec des bordures

trois colonnes dont une avec des bordures [CSS] - HTML/CSS - Programmation

Marsh Posté le 19-09-2003 à 16:27:14    

je continue mon exploration sur les css et j'essaye de faire un site avec trois colonnes. Rien de bien compliquer jusque la, et puis je me dis je vais mettre des bordures sur l'une d'elle donc j'obtiens ça comme code:

Code :
  1. <div style="float:left; width:30%; background-color:red">
  2.  <p>truc</p>
  3.  <p>truc</p>
  4.  <p>truc</p>
  5.  <p>truc</p>
  6.  <p>truc</p>
  7.  <p>truc</p>
  8.  <p>truc</p>
  9.  <p>truc</p>
  10.  <p>truc</p>
  11.  <p>truc</p>
  12.  <p>truc</p>
  13.  <p>truc</p>
  14.  <p>truc</p>
  15.  <p>truc</p>
  16.    </div>
  17.    <div style="float:left; width:40%; background-color:blue; border: 1px solid #fff;">
  18.  <p>truc</p>
  19.  <p>truc</p>
  20.  <p>truc</p>
  21.  <p>truc</p>
  22.  <p>truc</p>
  23.  <p>truc</p>
  24.  <p>truc</p>
  25.  <p>truc</p>
  26.  <p>truc</p>
  27.  <p>truc</p>
  28.  <p>truc</p>
  29.  <p>truc</p>
  30.  <p>truc</p>
  31.  <p>truc</p>
  32.    </div>
  33.    <div style="float:left; width:30%; background-color:green">
  34.  <p>truc</p>
  35.  <p>truc</p>
  36.  <p>truc</p>
  37.  <p>truc</p>
  38.  <p>truc</p>
  39.  <p>truc</p>
  40.  <p>truc</p>
  41.  <p>truc</p>
  42.  <p>truc</p>
  43.  <p>truc</p>
  44.  <p>truc</p>
  45.  <p>truc</p>
  46.  <p>truc</p>
  47.  <p>truc</p>
  48.    </div>


Sous IE pas de probleme j'ai bien mes trois colonnes qui prennent toute la largeur, mais sous mozilla dès que je mets des bordures ma troisieme colonne va à la ligne... Et pourquoi donc ?
Et comment que je fais pour pas avoir ce probleme tout en utisant float?

Reply

Marsh Posté le 19-09-2003 à 16:27:14   

Reply

Marsh Posté le 19-09-2003 à 16:33:25    

parce que 30% + 40% + 30% + 2px = 100% + 2px et pas 100%

Reply

Marsh Posté le 19-09-2003 à 16:37:34    

ok ça reste logique donc si on considere que les bordures sont externes au div. Perso je pensais qu'elles etaient à l'intérieur.
 
Donc c'est quoi la solution pour avoir trois divs les un a coté des autres dont un qui ait une bordure? Parce que je suppose que le

Code :
  1. width: 40% - 2px;

ça marche moyen

Reply

Marsh Posté le 19-09-2003 à 16:40:08    

bah déjà, faut essayer de trouver l'intérêt de mettre 3 float au lieu de 2 + un div normal...

Reply

Marsh Posté le 19-09-2003 à 16:47:52    

ouh je te sens chafouin  :o  
 
bon alors je reformule ma question, comment faire trois colonnes  (dont une avec des bordures) qui prennent toutes la largeur de l'ecran, le tout sans positionnement absolu ?

Reply

Marsh Posté le 19-09-2003 à 16:59:47    

absolu? pour le moment, c'est pas en absolu...
 
alors, moi je ferai un truc comme ça:
<div style="float:left; width:30%">
blabla
</div>
<div style="float:right; width:30%">
blabla
</div>
<div style="margin:auto 30%;border:1px solid black">
blabla
</div>

Reply

Marsh Posté le 19-09-2003 à 17:07:13    

:jap: merci ça marche niquel...
je venais de trouver une autre solution bien dégueu qui consistait à mettre une div avec les bordures dans ma colonne mais ta solution est vraiment parfaite.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed