Search code examples
htmlcssmargins

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

Here is the relevant HTML: 

    <div class="row">
        <div class="arrow box">&#9668;</div>Month Year<div class="dayMonth box"></div>&#9658;<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:

see description

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?

Solution

  • 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">&#9668;</div><div class="dayMonth box">Month Year</div><div class="arrow box">&#9658;</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).