CODEWITHSUNDEEP
htmlcsscss-float
Programmer XYZ
Programmer XYZ

Reputation: 408

Getting a container to recognise css float and not auto adjust height

Example

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?

Upvotes: 1

Views: 770

Answers (2)

n00p
n00p

Reputation: 116

You should add overflow:hidden; on the style of the container <div id="storehours"> .

Upvotes: 5

Mr. Alien
Mr. Alien

Reputation: 157434

It is because you are not clearing your floats use this

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

Upvotes: 2

Related Questions