Problem

I have the following mark-up:

    <div id="progress-bar">
        <div id="step-1" class="active"><p>1. Select Room</p></div>
        <div id="step-2" class="incomplete"><p>2. Choose Date</p></div>
        <div id="step-3" class="incomplete"><p>3. Confirm Order</p></div>
        <div id="step-4" class="incomplete"><p>4. Make Payment</p></div>
    </div>

The border it meant to surround all of the "steps", but instead cuts them in half, the only way I've found to solve is to explicitly set the height on this, although I thought the content inside would do this when not setting a height.

According to Chrome's Inspect Element, these are all of the CSS rules applied to it:

Progress Bar:

di开发者_如何学运维v#progress-bar {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid black;
}

Individual Steps only have mark-up for font styling (text-shadow, font-size), as well as (Where step-x corresponds to step-1,step-2 etc.):

div#step-x {
    padding: 10px;
    width: 227.5px;
    float: left;
}

I did use a CSS reset, although I assumed the idea behind those was to remove all styling, so could that be an issue?

Any links to this specific problem elsewhere (further reading, if it's a known bug, perhaps a workaround) are welcome.

try to add overflow:auto for the #progress-bar to clear the floats. Info http://www.quirksmode.org/css/clearing.html

Use overflow: visible.

div#progress-bar {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid black;
    overflow: visible;
}

Floating stuff does some non-intuitive stuff to wrapping elements.