HTML5 Tag behavior vs Div tag behavior

Question

I have two identical sections of code where there are three div's contained inside a parent tag. One parent tag is the HTML5 tag and the other is a div tag with a class ".footer". I have given these two sections identical css code, but I am receiving different results. I am resizing the height of first contained div tag with the class ".one" to be 400px, which is larger than its containing tags height which is 300px. With the HTML5 tag the entire containing div expands with the larger div. However the div with the class "footer" remains unchanged. Is this because I am writing my css improperly or do HTML5 tags behave differently than div tags?

View it on JSFiddle

  <div class="footer">

        <div class="one">
            div 1
        </div>

        <div class="two">
            div 2
        </div>

        <div class="three">
            div 3
        </div>

    </div>

    <footer>

        <div class="one">
            div 1
        </div>

        <div class="two">
            div 2
        </div>

        <div class="three">
            div 3
        </div>

    </footer>

Here is the CSS I used

.footer{
    background-color: rgba(0,0,102,1);
    width: 1000px;
    height: 1%;
    overflow: auto;
    }
.footer div {
    margin-right: 50px;
    width: 200px;
    height: 300px;
    float: left;
    margin-left: 50px;
    }
footer{
    background-color: rgba(0,51,255,1);
    width: 1000px;
    height: 1%;
    overflow: auto;
    }
footer div {
    margin-right: 50px;
    width: 200px;
    height: 300px;
    float: left;
    margin-left: 50px;
    }
.one{
    height: 400px;
    }

Answer 1

This might be on account of user agent stylesheets. Browsers give default formatting to different elements. As an example, Chrome displays p as display: block; and gives it some margin, but doesn't do the same for span. Without a reset stylesheet in place, there's no reason to think two HTML elements would display the same in a given browser.

Edit:

However, this isn't your issue. The problem here is specificity. You might already know this, but when there are two competing values for a given element's property, CSS chooses the property defined by the most specific selector. In this case, the selector .footer div is more specific than .one, so the child div is using the height defined by .footer div, which happens to be the shorter one.

Change the selector of your child div to be more specific, which you could do by using an id, and it works as you'd expect.