[Résolu] Classique : comment faire 2 colonnes de même taille ?

Bonsoir,

Oui, je sais, c'est un sujet très classique, mais comment faire pour que 2 colonnes aient la même taille ?

#conteneur {
background-color: #000000;
margin-top: 20px;
border-collapse:collapse;
}
#gauche {
background-color: #000000;
width: 50%;
float: left;
text-align: center;
}
#droite {
background-color: #000000;
width: 50%;
float: left;
text-align: center;
}

Pitié, ne me renvoyez pas vers une autre page, car je pense les avoir toutes lues, hier de 21h00 à 03h00 !

Merci par avance
Modifié par Brian (14 Apr 2006 - 17:14)

Salut,
Si tu as lu toutes les pages sur le sujet et que tu n'as pas trouvé une seule solution, ça va être dur de t'aider

En fait, j'aimerais bien savoir ce qui ne va pas dans mon code !

Merci à vous !

Bonjour Brian et bienvenue sur Alsacréations ,

Encore faudrait-il savoir de quelle taille du parles ? De largeur, de hauteur ? Et en savoir un peu plus du contexte de sa page, quel est le code html auquel s'applique ce bout de code css ?

Concrétement ta question n'est pas assez précise pour l'on puisse se risquer à quelque réponse que ce soit.

Quelle est la raison d'utiliser la propriété border-collapse ?

Bon comme tu réclames un peu de lecture , connais-tu la faq ?

Merci pour ta réponse !

<div id="conteneur">
<div id="gauche">
Inscrivez-vous à la lettre d'information afin d'être tenu au courant de l'actualié du site.</div>
<div id="droite">
Vous pouvez contacter le Webmaster du site en lui envoyant un email.<br />
</div>
</div>

Voilà pour le HTML !

Pour ce qui est de la FAQ, je l'ai dejà lu et relu !

@ bientôt
Modifié par Brian (13 Apr 2006 - 22:31)

largeur, hauteur

Igor a écrit :
largeur, hauteur

Je suis desolé, mais je ne comprend pas !

Bonjour à tous,

Igor a écrit :

Encore faudrait-il savoir de quelle taille du parles ? De largeur, de hauteur ?

Tu veux 2 colonnes de même hauteur, de même largeur, les deux ?

Un conseil : pour voir tes colonnes, tu devrais changer les couleurs de fond de tes div droite et gauche ...



Ensuite, cela devrait suffire :

#conteneur {

background-color: #000000;

margin-top: 20px;

border-collapse:collapse;

width : 100%;

}

#gauche {

background-color: grey;

width: 50%;

float: left;

text-align: center;



}

#droite {

background-color: red;

text-align: center;

}

J'ai changé les couleurs, au passage !

Modifié par Vero (14 Apr 2006 - 00:42)

J'ai essayé ton code mais le problème reste entier, en fait, je voulais avoir 2 divisions de même hauteur, et de même largeur !

Merci pour votre réactivité...

PS : retenez moi de refaire un tableau ! Pitié

Ok.

Mais, dans le code que je t'ai donné, les colonnes ont bien la même largeur chez toi ?

Oui mais pas de la même hauteur !

Je commence à désespérer...

Voilà la méthode que j'emploierai, sans doute pas élégante du tout:
tu fais un conteneur général, dans ce conteneur tu places tes deux div, en leur spécifiant 100% de height. Ainsi elles auront toutes les deux la même hauteur

J'ai compris le problème : (mais ca ne marche toujours pas !)

#conteneur {
background-color: #000000;
margin-top: 20px;
width : 100%;
}
#droite {
width: 50%;
height: 100%;
float: right;
text-align: center;
}
#gauche {
width: 50%;
height: 100%;
float: left;
text-align: center;
}

Le plus bisard, c'est que le conteneur de couleur noire ne s'affiche pas !

Voilà le HTML :

<div id="conteneur">
<div id="droite">
Inscrivez-vous à la lettre d'information afin d'être tenu au courant de l'actualié du site.<br />
</div>
<div id="gauche">
Vous pouvez contacter le Webmaster du site en lui envoyant un email.<br />
</div>
</div>

Merci à vous!
Modifié par Brian (14 Apr 2006 - 12:54)

Normal, parce que #droite et #gauche sont en float ... donc on peut dire qu'ils n'existent pas pour ton #conteneur.

Il y a effectivement un tas de pages qui ont été ecrite sur ce sujet ..
si tu fais

<div id="conteneur">

<div id="droite">Inscrivez-vous à la lettre d'information afin d'être tenu au courant de l'actualié du site.</div>

<div id="gauche">Vous pouvez contacter le Webmaster du site en lui envoyant un email.</div>

<hr />

</div>

et

hr { clear: both; visibility: hidden }

... je pense que ce ira .. et tu te repencheras sur le sujet un autre jour.
Modifié par dhjapan (14 Apr 2006 - 12:59)

Ca marche presque, mais il y a un écart de quelques px !

Je vous adore !

PS : sous IE, il n'y a aucune différence...
Modifié par Brian (14 Apr 2006 - 13:08)

Toujours pas d'idée ?

Je commence à croire que le CSS 2 a quelques defauts, heuresement corrigés dans le CSS 3...

Il me semble que nous t'avons donné toutes les solutions ...
Quel problème rencontres-tu depuis ?

..et envois ton code avec

On reprend tout à zéro. Comment faire faire 2 colonnes de même hauteurs et de même largeur (en sachant que les 2 colonnes occupent toute la largeur de la page et que la hauteur des 2 colonnes dépend du contenu) ? Avec des tableaux, c'est très très simple, mais il parrait que c n'est pas respectueux des standarts Web !

Merci pour votre réactivité !