Colonnes à hauteur égale avec rembourrage

Hey. J'ai le balisage suivant:Colonnes à hauteur égale avec rembourrage

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <style type="text/css"> 
* 
{ 
    padding: 0; 
    margin: 0; 
} 

#container 
{ 
    padding-left: 200px; 
    padding-right: 10px; 
    overflow: hidden; 
} 

.column 
{ 
    float: left; 
    position: relative; 
    text-align: justify; 
    margin-bottom: -2000px; 
    padding-bottom: 2005px; 
} 

#top 
{ 
    background-color: Red; 
    height: 30px; 
} 

#content 
{ 
    background-color: Green; 
    width: 100%; 
    padding: 0 5px; 
} 

#left 
{ 
    background-color: Blue; 
    width: 200px; 
    right: 210px; 
    margin-top: -30px; 
    margin-left: -100%; 
} 
    </style> 
</head> 
<body> 
    <div id="container"> 
     <div id="top"> 
      Lorem ipsum blah blah blah 
     </div> 
     <div id="content" class="column"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur odio eros, porta eu rutrum sed, vestibulum nec nisl. Nulla facilisi. Nunc viverra, ante eget lobortis fermentum, mauris est rhoncus nisl, nec ullamcorper risus ligula a sem. Donec a lorem sit amet nunc pharetra rhoncus. Aenean rutrum tincidunt dui nec dapibus. Nullam posuere semper quam, sed eleifend enim pulvinar a. Praesent mattis dui id nisl placerat dignissim. Mauris hendrerit ultricies justo, laoreet luctus turpis consequat ac. Suspendisse potenti. Ut in ipsum ligula. Phasellus sagittis metus ac libero varius vel pulvinar tortor scelerisque. Donec cursus augue ut arcu porta viverra. Quisque tempus aliquam erat sed viverra. Suspendisse sem odio, ornare sit amet sodales id, vulputate non erat. Aenean viverra tempus turpis commodo dictum. Nulla eleifend risus egestas justo vestibulum in volutpat orci lacinia. Proin sapien neque, lobortis eget cursus quis, venenatis vitae nisl. Suspendisse at neque eu mauris lobortis eleifend. Etiam suscipit sapien nec orci tincidunt at hendrerit nisl tempus. 
     </div> 
     <div id="left" class="column"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur odio eros, porta eu rutrum sed, vestibulum nec nisl. Nulla facilisi. Nunc viverra, ante eget lobortis fermentum, mauris est rhoncus nisl, nec ullamcorper risus ligula a sem. Donec a lorem sit amet nunc pharetra rhoncus. Aenean rutrum tincidunt dui nec dapibus. Nullam posuere semper quam, sed eleifend enim pulvinar a. Praesent mattis dui id nisl placerat dignissim. Mauris hendrerit ultricies justo, laoreet luctus turpis consequat ac. Suspendisse potenti. Ut in ipsum ligula. Phasellus sagittis metus ac libero varius vel pulvinar tortor scelerisque. Donec cursus augue ut arcu porta viverra. Quisque tempus aliquam erat sed viverra. Suspendisse sem odio, ornare sit amet sodales id, vulputate non erat. Aenean viverra tempus turpis commodo dictum. Nulla eleifend risus egestas justo vestibulum in volutpat orci lacinia. Proin sapien neque, lobortis eget cursus quis, venenatis vitae nisl. Suspendisse at neque eu mauris lobortis eleifend. Etiam suscipit sapien nec orci tincidunt at hendrerit nisl tempus. 
     </div> 
    </div> 
</body> 
</html>

Le problème est que la colonne de gauche ne s'affiche pas. Cependant, si je supprime le remplissage de #content (et soustrais 10 de la valeur # de gauche), cela fonctionne, sauf pour le remplissage manquant sur #content. Est-il possible de résoudre ce problème sans balise supplémentaire? Je l'ai vu cette solution:

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Mais je voudrais garder la quantité d'emballages au minimum ... :)

Source

2010-08-17 ManiSto

Quel est le but de la marge-gauche: -100% ;? – buckbova

thats pour les colonnes de hauteur égale soi-disant, bien que dans ce cas, il est le coupable sur pourquoi la colonne de gauche ne montre pas – corroded

Le point entier des wrappers dans ce lien, est de donner la visibilité d'une colonne de hauteur égale. Les wrappers fournissent les arrière-plans pour vos colonnes. Vous ne pouvez pas faire en sorte que les colonnes ayant un contenu fluide aient la même hauteur en CSS sans cette astuce. – Strelok