Avant tout oubliez les hack et utilisez des commentaires conditionnel.
Lorsque l’on clique sur un lien dans firefox, un contour pointillés apparait, c'est moche. Pour éviter ceci je propose celà:
a:HOVER { outline:0; }
Pourquoi mettre sur a:HOVER et pas sur a? Simplement pour ne pas perdre l'encadré lorsque l'on utilise la touche [Tab] pour parcourir les liens.
Ceci est difficile à faire uniquement avec des div et c'est normal, les blocs <div> ne sont pas des cellules dépendantes les unes des autres.
En raison des déficiences ou obsolescence de certains navigateurs, la solution la plus robuste demeure l'emploi de tableaux de mise en page, à condition qu'ils soient bien conçus et non enchevêtrés.
La solution la plus simple est celle des “colonnes factices” (“faux-columns”) dont le principe repose sur une image de fond: http://pompage.net/pompe/colonnesfactices/
Certains modèles (principalement des derniers) d'Alsacréations permettent aux colonnes de s'étirer: http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS
Un blog anglais regroupe les différentes techniques : http://www.ejeliot.com/blog/61
Il existe un tutoriel complet qui explique comment réaliser un design en CSS avec deux colonnes de même hauteur:
Liens complémentaires: