28172 sujets

CSS et mise en forme, CSS3

Bonjour (ou bonsoir !),

J'ai un problème qui me turlupine depuis une bonne heure et finalement je vais m'en remettre à vos conseils.
J'ai une div qui contient deux divs, quelque chose dans ce style la:

<div id="conteneur">
<div id="principale"></div>
<div id="secondaire"></div>
</div>


Puis dans ma div principale, j'ajoute du texte ce qui adapte automatiquement la hauteur de ma div. Jusque la ok !
J'aimerai maintenant que ma secondaire s'adapte automatiquement et prenne la même hauteur que la principale même si elle n'est pas "remplie"

Existe il une possibilité de faire ceci ? Si oui pourriez vous me l'expliquer ? Smiley sweatdrop
En vous remerciant !
Hello Kizux et bienvenue, Smiley smile

tu pourrais regarder du côté de la propriété display :
#conteneur {
	width: 600px;
	display: table;
	border: 1px solid #000;
}

#principale, #secondaire {
	padding: 5px;
	display: table-cell;
}

#principale {
	background: #3c0;
}

#secondaire {
	background: #fc0;
}
Ha ha !
Encore ma mauvaise habitude de lire trop vite les tutoriels, je pensais qu'il n'y avait que inline et bock pour l'attribut display Smiley murf

J'avais encore un mini problème : mes deux cellules étaient collées l'une à l'autre, j'avais souhaité un espace entre les deux, pour se faire j'ai utilisé l'attribut border-spacing
. (Voila qui est dit pour nos futurs camarades qui passeraient par ici et qui aurait un problème similaire)

Merci de ton aide Heyoan !
J'ai parlé un peu trop vite:
Le rendu sur firefox est très bien, je suis super content. Par contre du côté de IE8 c'est autre chose, celui ci ne supporte pas les display:table ?

Pour IE8, mes divs sont l'une sous l'autre Smiley ohwell
Kizux a écrit :
Par contre du côté de IE8 c'est autre chose, celui ci ne supporte pas les display:table ?
Si, mais ça n'est pas le cas de IE7 : peut-être es-tu en mode compatibilité ?

Sinon tu peux utiliser un vrai élément TABLE ou faire une recherche sur les "colonnes factices".