Question

How do i put a border on a div in css that doesn’t have a set height?

Want to achieve this without using any javascript. Code is below.

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{}

Thanks in advance.

Answer 1

It doesn’t matter if there is no height attribute. Just use the border property as you normally would.

Edit: since you mention you have other divs inside your container div, I suspect you might need to use a clear. If you’re still having issues with either the background or border not extending the length of the container, try adding this right before the closing div of the container:

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