div内部的div未按预期对齐

Question

You can visit the site I am trying to work on here .

I am trying to get basically the layout as in the top right box in the bottom right box, but for some reason I cannot get it to float to the right. Is there something I am missing here? It's driving me nuts because my code works in the upper box but not in the lower one.

Here's the 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>
        </div>
    </div><!--end hours-->
</div><!--end container-->

And the 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-right: -11px;
    margin-top: 11px;
    width: 268px;
    height: auto;
    float: right;
    padding: 11px 11px 10px 10p;
    border-left: 2px solid #b9aea3;
}

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

Thanks for any help! It's probably something simple and I just need a fresh pair of eyes.

Answer 1

you seem to have a typo,

under the style rule for

div#hours

you have

padding: 11px 11px 10px 10p;

your missing an 'x' at the end. Which means the padding rule is not being applied

Now this solves the alignment, but the height might not be right now, but I'm sure that should be straight forward