Question

I am trying to float multiple divs (2 pictured, another will be added later). The problem is that the site container seems to ignore them when set to auto. I am not sure if this is something wrong with the container css, or the css used to with the divs. How would I go about getting the site container to recognize the floats? Thanks in advance.

Relevant HTML:

<div id="storehours">
    <div id="hoursheader"><p>Shop Hours</p></div>
</div>

Relevant CSS:

#storehours {
    border: 1px solid black;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    margin-left: 11px;
    margin-bottom: 15px;
    width: 250px;
    height: auto;
    float: left;
}

(That code is for the div on the right, the left one is the same but contains the form, which I don’t think is the problem.)

Edit: Updated with clears and fixed cap letter. Still having the same problem.

Edit2: For clarification. The html is within the container that also contains the google maps. As you cans see, the floats cause the container to ignore them and they start at the bottom of the container. I could potentially fix the problem by setting a height on the container instead of leaving it auto, but is that good practice?

Answer 1

It is because you are not clearing your floats use this

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