Définition dynamique de la hauteur de div avec des listes non ordonnées

Question

Dois-je spécifier manuellement la hauteur d'un div contenant une liste non ordonnée?

Quand je l'ai comme ça, les div main1 et main2 se chevauchent si je ne règle pas la hauteur de la div. Y a-t-il un moyen de le faire sans spécifier la hauteur?

<div id='main1'> <ul> <li> </li> <li> </li> <li> </li> </ul> </div> <div id='main2'> <ul> <li> </li> <li> </li> <li> </li> </ul> </div>

Answer 1

Avez-vous essayé la propriété de flotteur flotter à gauche ou à droite?

#mail1 { float:left }; 
#mail2 { float:left }; 

Merci

Answer 2

Si elles sont chevauchement, vous avez certainement obtenu un autre CSS qui lui est applicable. Utilisez un outil de débogage comme Firebug pour Firefox, les Outils de développement dans Chrome/WebKit ou la Thingummy What's-It-Appelée dans IE, et regardez les styles appliqués pour le div/ul/li.

Answer 3

Ils ne se chevaucheront pas à moins qu'ils ne soient absolument positionnés ou que d'autres éléments magiques CSS leur soient appliqués, tels que des marges négatives. Vérifiez cela en premier et appliquez les corrections nécessaires.

Néanmoins, si vous avez besoin de récupérer les dimensions d'un élément dynamique, par exemple de positionner dynamiquement un moment fort dans un menu lampe de style lave, utilisez jQuery:

$('#element').outerWidth(); 
$('#element').outerHeight(); 

Answer 4

position d'utilisation: propriété relative pour deux DIVs