Ordered Lists and Parent Divs

[liunx]

Hi,

I have an ordered list nested in a div and styling it with css - however it seems to be bigger than the div its in! How can I fix it so that my list is contained in the div - so I can add a border round the div ?


<style>
#ListContainer {
background-color: #d1d1d1;
}
#List
{
position: relative;
margin-left: 0;
border-bottom: 1px solid #778;
}

#List li
{
list-style: none;
margin: -4px;
display: inline;
}

#List li a
{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none; div
background: #DDE;
text-decoration: none;
}

#List li a:link { color: #448; }
#List li a:visited { color: #667; }

#List li a:hover
{
color: #000;
background: #AAE;
border-color: #227;
}

#List li a#current
{
background: white;
border-bottom: 1px solid white;
}

</style>

<div id="ListContainer">
<ul id="List">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Option 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Option 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Option 3</a></li>
</ul>
</div>Give the div a border and see what happens!Excellent stuff - how can I make the div be the same size as the list elements / boxes?Cool got it!


<style>
#ListContainer {
background-color: #d1d1d1;
border: 1px solid blue;

}
#List
{
border: 1px solid black;
margin: 0;
padding: 0;
}

#List li
{
list-style: none;
margin-left: -5px;
display: inline;
}

#List li a
{
padding:0;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}

#List li a:link { color: #448; }
#List li a:visited { color: #667; }

#List li a:hover
{
color: #000;
background: #AAE;
border-color: #227;
}

#List li a#current
{
background: white;
border-bottom: 1px solid white;
}

</style>

<div id="ListContainer">
<ul id="List">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Option 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Option 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Option 3</a></li>
</ul>
</div>