3 colonnes, même hauteur, mais avec bordure ?

Salut a tous,

Je me retrouve face à une difficulté...
J'essaye en gros de faire comme cela :
http://www.casimages.com/img.php?i=110210062956923992.gif

J'ai donc besoin de 3 colonnes de même hauteur, mais chaque colonne a une bordure noire tout autour... La "tricherie" avec l'image de fond est donc compromise.

Voici mon code actuel:

<div id="leftsidebar">			
		</div>

		<div id="rightsidebar">
		</div>
		
		<div id="content">
		</div>

div#leftsidebar 
{
	float: left;
	width: 256px;
	margin: 0;
	padding: 0;
	border: 1px solid #000;
	background: #fff;
}
div#rightsidebar 
{
	float: right;
	width: 256px;
	margin: 0 10px 0 0;
	padding: 0;
	border: 1px solid #000;
	background: #fff;
}
div#content 
{	
	margin: 0 270px 0 260px;
	padding: 0;
	border: 1px solid #000;
	background: #fff;
}

J'ai farfouillé sur Internet mais ne semble pas trouver une solution propre à ce probleme.

Je me permets donc d'en référer à vos neurones et expérience : certains d'entre vous auraient-ils des idées sur la maniere d'y parvenir ?

Un grand merci d'avance,
Linoa

personnellement, j'ai du mal a comprendre ce que tu souhaites réaliser.

tu ne veux pas de bordures ? ou c'est la structure de la page qui te pose pb?
Modifié par Latomate (11 Feb 2011 - 10:35)

Salut,

Comme ça, à froid, je vois 2 méthodes :
1) le display : table-cell (voire de vraies cases de tableaux si ça se justifie), mais je ne suis pas sûr que ça marche partout
2) tu relèves la hauteur de chacun des éléments en javascript et tu les alignes sur la plus grande valeur.

Bonjour,

La "tricherie" avec l'image de fond reste tout à fait possible, il faudra juste rajouter une image avec la bordure haut dans un éléments précédant les colonnes (la fin du header ou autre) et la bordure du bas dans un élément suivant les colonnes.

Salut,

Marvin Le Rouge a écrit :
le display : table-cell (voire de vraies cases de tableaux si ça se justifie), mais je ne suis pas sûr que ça marche partout

La déclaration display: table-cell n'est pas reconnue par les versions d'IE antérieures à la 8.

La technique dite des colonnes factices, évoquée par Laurie-Anne, constitue la meilleure solution en matière de compatibilité maximale pour ce cas précis.

Tout d'abord, un grand merci à tous pour votre intervention.

Si la méthode des colonnes factices vous semble possible, c'est effectivement celle que je choisirais en première.

En ce cas puis-je simplement ajouter une image (ma bordure haute et ma bordure basse) dans un élément <p> (au-dessus et en-dessous de mes colonnes) ? <p> ferait alors partie de ma div qui englobe mes 3 colonnes. Est-ce propre de n'avoir qu'une image dans un élément <p> ?

Encore merci pour vos interventions.
Linoa