Problème de bordure CSS

Question

Comment mettre une bordure sur un div dans css qui n'a pas de hauteur définie?

Vous voulez réaliser ceci sans utiliser de javascript. Le code est ci-dessous.

HTML

<div id="main_container"> 

<div id="header"> 

<div id="topMenu"> 
<ul id="topNav"> 
<li><a href="#">Home</a></li><li><a href="#">Contact</a></li><li><a href="#">Links</a></li> 
</ul> 
</div> 

<div id="mainMenu"> 
<ul id="mainNav"> 
<li ><a href="#">Home</a></li><li ><a href="#">About Us</a></li><li ><a href="#">Multimedia</a></li><li ><a href="#">Multimedia</a></li><li ><a href="#">Multimedia</a></li><li ><a href="#">Multimedia</a></li><li ><a href="#">Multimedia</a></li><li ><a href="#">Multimedia</a></li> 
</ul> 
</div> 

</div> 

</div> 

css

body{ 
text-align:center; 
min-width:70%; 
} 

#main_container{ 
position:relative; 
width:980px; 
margin:auto; 
text-align:center; 
background-color:#FFFFFF; 
border-color: #999999; 
border-style: solid ; 
border-width: 1px ; 
margin-bottom: 20px; 
} 

#header{ 
position: relative; 
width: 980px; 
} 

#mainMenu{ 
float:left; 
width: 980px; 
top: 50px; 
background-color: #0099FF; 
height: 30px; 
} 

#mainNav{ 
text-align: left; 
} 

ul#mainNav li{ 
display: inline; 
margin: 0px 20px 0px 0px; 
} 

#topMenu{ 
width: 150px; 
top: 10px; 
text-align: right; 
float:right; 
margin-bottom: 20px; 
} 

ul#topNav li{ 
display: inline; 
margin: 0px 10px 0px 0px; 
} 


#footer{} 

Merci à l'avance.

Answer 1

Peu importe s'il n'y a pas d'attribut de hauteur. Utilisez simplement la propriété border comme vous le feriez normalement. Edit: puisque vous mentionnez que vous avez d'autres divs à l'intérieur de votre conteneur div, je suppose que vous devrez utiliser un clear. Si vous rencontrez toujours des problèmes avec soit l'arrière-plan ou à la frontière ne s'étendant la longueur du récipient, essayez d'ajouter ce droit avant la div de fermeture du conteneur:

<div style="clear:both"></div> 

Answer 2

Cela fonctionne-t-il?

<div style="border:1px solid #000"> 
Your content here 
</div> 

Answer 3

Donnez juste div certains padding ou contenu à l'intérieur.

div { 
    border: solid 1px #000; 
    padding: 10px; 
}