Trouble with div in div positioning

Question

You can visit the site I am working on here.

You can see what I am going for. I want the bottom right box to mimic the top right box in its positioning, but for some reason it refuses to fill the rest its parent div and opts to stack vertically. Even without content the background stops about half way through the box. I have it set to float left (something that shouldn't be necessary as div children should take their parent's width automatically), so I'm guessing there is something actually there but I cannot tell what. I have tried to clear and such but no luck there either. Is there a way to get that bottom right div to actually fill the parent div?

Here is my HTML

 <div id="menu-ad">
        <div>
            <p class="titles">Our Fare</p>
            <p id="ad">Our lunch and dinner menus feature European inspired comfort food accompanied by an extensive bar.</p>
            <a href="#" id="button">VIEW MENU</a>
        </div>
    </div><!--end menu ad-->

    <div id="hours">
        <div>
            <p class="titles">Hours</p>
            <p class="subtitles">Lunch</p>
            <p class="subtitles">Dinner</p>
            <p class="subtitles">Bar</p>
        </div>
        <div>
            <p class="hours">Mon-Fri 11-4</p>
            <p class="hours">Mon-Sat 4-12</p>
            <p class="hours">Mon-Sat 4-12</p>
        </div>
    </div><!--end hours-->

And my CSS

/*menu ad*/

div#menu-ad {
    position: relative;
    margin-right: -11px;
    margin-top: -11px;
    width: 268px;
    height: auto;
    float: right;
    padding: 11px 11px 10px 10px;
    border-left: 2px solid #b9aea3;
    border-bottom: 2px solid #b9aea3;
    overflow: hidden;
}

div#menu-ad div {
    background: #f9f4df;
    padding: 1.9rem 4rem 2.5rem 2.5rem;
    height: 200px;
    display: inline-block;
}

.titles {
    font-family: "Montserrat", "Helvetica", sans-serif;
    font-size: 2.5rem;
    color: #d6832e;
}

#ad {
    font-family: "Montserrat", "Helvetica", sans-serif;
    font-size:  1.6rem;
    line-height: 1.35;
    color: #4f4d4b;
    margin-top: .5rem;
    width: auto;
}

a#button {
    padding: .6rem 1.3rem .6rem 1.3rem;
    font-family: "Montserrat", "Helvetica", sans-serif;
    font-size: 1.8rem;
    color: #fff;
    background: #d6832e;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    position: absolute;
    float: left;
    bottom: 3.5rem;
}

/*hours*/

div#hours {
    position: relative;
    margin-top: -1px;
    margin-right: -11px;
    width: 268px;
    height: auto;
    float: right;
    padding: 11px 11px 10px 10px;
    border-left: 2px solid #b9aea3;
}

div#hours div {
    background: #f9f4df;
    padding: 1.9rem 4rem 2.5rem 2.5rem;
    width: auto;
    height: 150px;
    display: inline-block;
}

.subtitles {
    font-family: "Montserrat", "Helvetica", sans-serif;
    font-size:  2rem;
    color: #4f4d4b;
    text-align: left;
    line-height: 2;
}

.hours {
    font-family: "Montserrat", "Helvetica", sans-serif;
    font-size:  1.7rem;
    color: #4f4d4b;
    text-align: right;
    line-height: 2;
}

Thanks for any help or advice!

Answer 1

Use followig. Those which are commented in here, need to remove form your code.

div.container {
    /*height: 460px;*/
    /*padding: 10px*/
    padding: 10px 10px 0px; /* bottom padding 0px */
}
div#hours div {
    /*inline-block*/
}

Now add following after ending tag of #hours.

<div style="clear:both;"></div>

To make #hours div look nice, use following.

<div id="hours">
    <h3 class="titles">Hours</h3>
    <dl>
        <dt>Lunch</dt>
        <dd>Mon-Fri 11-4</dd>
        <dt>Dinner</dt>
        <dd>Mon-Sat 4-12</dd>
        <dt>Bar</dt>
        <dd>Mon-Sat 4-12</dd>
    </dl>
</div><!--end hours-->

CSS Styles -

#hours dl,
#hours dt,
#hours dd {
    margin: 0;
    padding: 0;
}
#hours dl {
    width: 100%;
    float: left;
    clear: both;
}
#hours dl dt {
    float: left;
    clear: left;
    width: 45%;
}
#hours dl dd {
    float: left;
}

Answer 2

If you change your structure a little, it might help you. Instead of trying to float to divs side by side, you could just join them together kinda like I did with the HTML and css below. I added comments where I changed stuff in the css.

HTML

<div id="menu-ad">
        <div>
            <p class="titles">Our Fare</p>
            <p id="ad">Our lunch and dinner menus feature European inspired comfort food accompanied by an extensive bar.</p>
            <a href="#" id="button">VIEW MENU</a>
        </div>
    </div><!--end menu ad-->

        <div id="hours">
        <div>
            <p class="titles">Hours</p>
            <p>
                <span class="subtitles">Lunch</span>
                <span class="hours">Mon-Fri 11-4</span>
            </p>

            <p>
                <span class="subtitles">Dinner</span>
                <span class="hours">Mon-Sat 4-12</span>
            </p>

            <p>
                <span class="subtitles">Bar</span>
                <span class="hours">Mon-Sat 4-12</span>
            </p>    
        </div>
    </div><!--end hours-->

CSS:

/*menu ad*/

div#menu-ad {
    position: relative;
    margin-right: -11px;
    margin-top: -11px;
    width: 268px;
    height: auto;
    float: right;
    padding: 11px 11px 10px 10px;
    border-left: 2px solid #b9aea3;
    border-bottom: 2px solid #b9aea3;
    overflow: hidden;
}

div#menu-ad div {
    background: #f9f4df;
    padding: 1.9rem 4rem 2.5rem 2.5rem;
    height: 200px;
    display: inline-block;
}

.titles {
    font-family: "Montserrat", "Helvetica", sans-serif;
    font-size: 2.5rem;
    color: #d6832e;
}

#ad {
    font-family: "Montserrat", "Helvetica", sans-serif;
    font-size:  1.6rem;
    line-height: 1.35;
    color: #4f4d4b;
    margin-top: .5rem;
    width: auto;
}

a#button {
    padding: .6rem 1.3rem .6rem 1.3rem;
    font-family: "Montserrat", "Helvetica", sans-serif;
    font-size: 1.8rem;
    color: #fff;
    background: #d6832e;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    position: absolute;
    float: left;
    bottom: 3.5rem;
}

/*hours*/

div#hours {
    position: relative;
    margin-top: -1px;
    margin-right: -11px;
    width: 268px;
    height: auto;
    float: right;
    padding: 11px 11px 10px 10px;
    border-left: 2px solid #b9aea3;
}

div#hours div {
    background: #f9f4df;
    padding: 1.9rem 4rem 2.5rem 2.5rem;
    width: auto;
    height: 150px;
   /***** Removed Display:inline-block *****/
}

.subtitles {
    float:left; /**** Added ****/
    font-family: "Montserrat", "Helvetica", sans-serif;
    font-size:  2rem;
    color: #4f4d4b;
    text-align: left;
    line-height: 2;
}

.hours {
    float:right; /**** Added ****/
    font-family: "Montserrat", "Helvetica", sans-serif;
    font-size:  1.7rem;
    color: #4f4d4b;
    text-align: right;
    line-height: 2;
}
#hours p {clear:both;} /**** Added ****/

Answer 3

I take it your trying to make the Hours take up the entire box?

If so, add this code to it:

height: 100%;
width: 100%;
padding: 0px;

Answer 4

All you need to do is to decrease the inner-div size that fits to your #hours div and assign a class to each of the inner div and float them left and right.

Example

<div id="hours">
    <div class="left">
        <p class="titles">Hours</p>
        <p class="subtitles">Lunch</p>
        <p class="subtitles">Dinner</p>
        <p class="subtitles">Bar</p>
    </div>
    <div class="right">
        <p class="hours">Mon-Fri 11-4</p>
        <p class="hours">Mon-Sat 4-12</p>
        <p class="hours">Mon-Sat 4-12</p>
    </div>
</div><!--end hours-->

CSS:

#hours .left
{
    float: left;
}

#hours .right
{
    float: right;
}

It will help for sure. Also start using browser`s consoles. They ease your life.