Setting the width of HTML div's with %'s - html

Question

Here is the relevant HTML:
<div class="row">
<div class="arrow box">◄</div>Month Year<div class="dayMonth box"></div>►<div class="arrow box"></div>
</div>
Here is the css which the .html file that the above HTML is in links to:
*
{
margin: 0;
padding: 0;
}
body
{
font-family: "Times New Roman";
font-size: 12pt;
}
.dayMonth
{
width: 80%;
}
.arrow
{
width: 10%;
}
.row
{
width: 58em;
background-color: gray;
margin-right: auto;
margin-left: auto;
}
.box
{
float: left;
text-align: center;
}
This is the output:
The "row" is centering in the browser right but the stuff inside it (the two arrows and the Month Year) aren't doing what I want.
What I think this should be doing is, because there are two arrows and both of their widths is sent to 10% and then the dayMonth width is 80% that all the divs should take up the entire "row" (because they sum to 100%) and that the text "Month Year" should be centered within the "row" because the .dayMonth css class says it should be centered in its div and because its div should be the center 80% of the "row". This, obviously, isn't happening though.
I don't want a different solution (per se) I want to know why the code I've written doesn't express the idea that I want it to express, doesn't work the way I want it to.
I think I must be misunderstanding how %'s governs widths. http://www.w3schools.com/css/pr_dim_width.asp says that %'s "Defines the width in percent of the containing block" though and that looks like %'s should do what I intend them to do so I'm thoroughly confused.
Where have I gone wrong?

Answer 1

This works fine for me in Opera.
I did notice that you have "Month Year" outside of the <div>. Try putting it inside and see if that fixes it.
Edit
And again with the last arrow, it's outside its <div> tag as well.
Your HTML should be like this:
<div class="row">
<div class="arrow box">◄</div><div class="dayMonth box">Month Year</div><div class="arrow box">►</div>
</div>
Also, once you do this, the row <div> will not have a height so you might want to explicitly set a height (try 20px).

Answer 2

Once i fix your HTML, it works fine for me in FF. You have empty divs and the Month Year and left arrow are not in their respective divs.
I figured this out real quick when i used firebug. You should debug using firebug or chrome's developer tools.

Answer 3

<div class="row">
<div class="arrow box">◄</div><div class="dayMonth box">Month Year</div><div class="arrow box">►</div>
</div>
Try the code like this, with the content inside the divs. Worked for me in FF, IE7/8, and Chrome. You may want to use a hex value for the .row color, like #333333 - the color wasn't rendering for me in any browser but IE7.

Answer 4

First, your markup is wrong, that's why you're seeing issues. It has to do with the content not being in the divs, but outside of them, causing height issues with the floated elements.
Here's the work corrected:
http://jsbin.com/ezari4/edit