清除浮动列表项

Question

Hi I'm having trouble clearing my list items that I've floated left As you can see from my jsFiddle the first list item is pushing the third item across messing up the layout. See my jsFiddle

<style>

.wrap {
    width:960px;
    margin:0 auto;
    overflow:hidden;
}

ul.team-members {
    overflow:hidden;
}

ul.team-members li {
    float:left;
    width:450px;
    margin-bottom:40px;
}

ul.team-members li img {
    float:left;
    width:120px;
    padding-right:20px;
}

ul.team-members li p {
    float:left;
    width:310px;
    margin:0;
}
</style>

    <section class="wrap">

        <h1>Our Team</h1>

        <div class="store">

            <h2>Monmouth</h2>

            <ul class="team-members">

                <li>
                    <img src="_/img/t-member.jpg">
                    <p><strong>Maureen</strong> - who is originally from Fife is our longest serving member of staff. Qualified to City & Guilds level in soft furnishings, Maureen is always keen to offer advice on projects, colour schemes, fabrics and trimmings. We have an 'Ask Maureen' option on our homepage where you can ask any soft furnishing or window treatment related question, the trickier the better as she loves a challenge!</p>
                </li>
                <li>
                    <img src="_/img/t-member.jpg">
                    <p><strong>Rosyln</strong> - is known for her bubbly welcoming approach to all customers and is always keen to help with advice on the selection of suitable fabrics for your curtains, blinds or upholstery.</p>
                </li>
                <li>
                    <img src="_/img/t-member.jpg">
                    <p><strong>Clare</strong> - has a background in interior design and is very experienced and knowledgeable on fabric choices, tracks, poles and the full spectrum of soft furnishing and upholstery options.</p>
                </li>
                <li>
                    <img src="_/img/t-member.jpg">
                    <p><strong>Ann</strong> - Manages our team, our workrooms and arranges installation in conjunction with our.</p>
                </li>

            </ul>

        </div>
</section>

Jeez I should know how to do this, mind has gone blank! Any Ideas?

Answer 1

Remove float:left and use display: inline-block; vertical-align: top; display: inline-block; vertical-align: top;

ul.team-members li {
   display: inline-block; vertical-align: top;
    width:450px;
    margin-bottom:40px;
}

DEMO

Answer 2

Demo

Hi now used to :nth-of-type(odd)

as like this

ul.team-members li:nth-of-type(odd){
clear:both;
}

Live demo

Answer 3

Try this:

ul.team-members li {
float:left;
width:450px;
margin-bottom:40px;
clear: both;
}

Answer 4

Use display: inline-block; instead of float: left; . Also don't forget to use vertical-align: top; to align the containers correctly.

Example: http://jsfiddle.net/EqHXP/3/