Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2269 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] trois colonnes dont une avec des bordures

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS] trois colonnes dont une avec des bordures

n°518328
anapajari
s/travail/glanding on hfr/gs;
Posté le 19-09-2003 à 16:27:14  profilanswer
 

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?

mood
Publicité
Posté le 19-09-2003 à 16:27:14  profilanswer
 

n°518334
gizmo
Posté le 19-09-2003 à 16:33:25  profilanswer
 

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

n°518342
anapajari
s/travail/glanding on hfr/gs;
Posté le 19-09-2003 à 16:37:34  profilanswer
 

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

n°518346
gizmo
Posté le 19-09-2003 à 16:40:08  profilanswer
 

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

n°518357
anapajari
s/travail/glanding on hfr/gs;
Posté le 19-09-2003 à 16:47:52  profilanswer
 

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 ?

n°518370
gizmo
Posté le 19-09-2003 à 16:59:47  profilanswer
 

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>

n°518375
anapajari
s/travail/glanding on hfr/gs;
Posté le 19-09-2003 à 17:07:13  profilanswer
 

: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.


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] trois colonnes dont une avec des bordures

 

Sujets relatifs
[RÉSOLU] Récupérer attributs définis par CSS externe via JavaScript ?[ PHP ] PHP et Feuille de Style CSS
[CSS] inline et width sur un div[CSS] outil de validation du W3C
Problème de CSS avec Konquerorbackground CSS et mise en cache
[CSS]Mettre une image de fondPreload en CSS ?
[CSS] newbie : Changer de style a un endroit precis [résolu][css] faire des colonnes ??
Plus de sujets relatifs à : [CSS] trois colonnes dont une avec des bordures


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR