Vous pouvez obtenir la même hauteur des colonnes en CSS par l'application de remplissage en bas d'une grande quantité, en bas à marge négative de la même quantité et environnant les colonnes avec un div qui a débordement caché. Verticalement centrer le texte est un peu plus délicat, mais cela devrait vous aider sur le chemin.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
#container {
overflow: hidden;
width: 100%;
}
#left-col {
float: left;
width: 50%;
background-color: orange;
padding-bottom: 500em;
margin-bottom: -500em;
}
#right-col {
float: left;
width: 50%;
margin-right: -1px; /* Thank you IE */
border-left: 1px solid black;
background-color: red;
padding-bottom: 500em;
margin-bottom: -500em;
}
</style>
</head>
<body>
<div id="container">
<div id="left-col">
<p>Test content</p>
<p>longer</p>
</div>
<div id="right-col">
<p>Test content</p>
</div>
</div>
</body>
Je pense qu'il vaut la peine de mentionner que la réponse précédente par streetpc a du code html non valide, le doctype XHTML et il y a des guillemets autour des attributs. Il faut également noter que vous n'avez pas besoin d'un élément supplémentaire avec l' clear sur pour effacer la flotte interne du conteneur. Si vous utilisez overflow hidden cela efface les flotteurs dans tous les navigateurs IE et puis juste ajouter quelque chose à donner hasLayout, tels que la largeur ou de zoom:1, c'est à dire clair de son interne de la flotte.
J'ai testé dans tous les navigateurs modernes FF3+ Opera9+ Chrome, Safari 3+ et IE6/7/8. Il peut sembler comme un vilain truc, mais il fonctionne bien et je l'utilise dans la production d'un lot.
J'espère que cette aide.
