How can I fully fill the parent div with its child elements? - html

Question

I have a div called #menu which is 800px wide. Inside of it, I have 8 navigation links. The elements in it should be as long as possible and should all be of the same width, but they should, together, fill the parent div on a single row (i.e. without wrapping).
Between each element, there should be a 1px border (or perhaps a 1px side-margin). All links, except the current page link (whichever link #current is applied to) should have a 1px solid #505050 bottom border. While the current page link should not have a visible bottom border (so that the navigation tab "merges" with the content div).
My current code does almost what I want already, but it's missing the border/margin between the links... If I add borders/margins to the sides, obviously, the current 12.5% width (see CSS code below) becomes inaccurate, and I can't fine-tune it so that it does fill the #menu div cross-browser (either the elements will overflow the #menu div, or they won't fill it - in at least one browser).
CSS:
#menu {
border:1px solid #505050;
border-bottom:none;
width:800px;
}
#menu a {
display:inline-block;
outline:none;
text-align:center;
width:12.5%;
padding-top:12px;
padding-bottom:10px;
background-image:url(/img/menu.gif);
border-bottom:1px solid #505050;
color:#D9D9D9;
font-weight:bold;
font-size:13px;
font-family:Verdana, sans-serif;
text-shadow:1px 1px #505050;
}
#menu #current {
background-image:url(/img/menu_current.gif);
color:#505050 !important;
border-bottom-color:#D9D9D9;
text-shadow:none;
}
HTML:
<div id="menu">
Link 1
Link 2
Link 3
Link 4
Link 5
Link 6
Link 7
Link 8
</div>
Two requirements:
The solution should work in IE6 and later IE versions, as well as recent versions of Firefox, Chrome, Safari and Opera
No use of JavaScript, please
It's a big plus if:
The solution works so that links can be added without having to re-adjust the width for the elements
You may of course rewrite the CSS/HTML completely. No need to re-use any of the code above, I'm just showing my own approach. Also, I am aware that the text-shadow rule isn't supported in IE6, but it isn't a requirement.
How it currently looks
The expected result

Answer 1

hi i think u want to this Demo
add some css in you stylesheet as like this
#menu{
font-size:0;
}
#menu a {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
#menu a + a{
border-left:solid 2px black; // depent your design .
}
Live demo
Change color or border according your design .

Answer 2

Another way is to use a html table instead of divs.
#menu {
width:800px;
border-collapse:collapse;
}
#menu td.other {
border:1px solid black;
}
td a {
display:inline-block;
outline:none;
text-align:center;
width:100%;
padding-top:12px;
padding-bottom:10px;
background-image:url(/img/menu.gif);
color:#D9D9D9;
font-weight:bold;
font-size:13px;
font-family:Verdana, sans-serif;
text-shadow:1px 1px #505050;
}
#menu#current {
background-image:url(/img/menu_current.gif);
color:#505050 !important;
border-bottom-color:#D9D9D9;
text-shadow:none;
border-left:1px solid black;
border-right:1px solid black;
border-top:1px solid black;
border-bottom:1px solid #D9D9D9;
}
<table id="menu" border="0">
<tr>
<td id="current">Link 1</td>
<td class="other">Link 2</td>
<td class="other">Link 2</td>
<td class="other">Link 2</td>
<td class="other">Link 2</td>
<td class="other">Link 2</td>
<td class="other">Link 2</td>
<td class="other">Link 2</td>
</tr>