CSS Divs Floated "Cards" in Wrap

I have this basic scenario setup where I am trying to float divs inside of a wrap. It is working nicely, however the simple effect I am trying to achieve isn't cooperating when the divs have variable heights. I have researched this a bunch tried to apply a clearfix to the 3rd card without success. The only success I've had is actually injecting another div after the 3rd card with a style of clear both. However this is not an approach I want to take as I don't want to change any of the clean markup. Thoughts on the best way to get this done? I don't mind using a simple bit of JS/jQuery if necessary.

Desired:

Current: http://andrew开发者_StackOverflowherrick.com/spike/floatcards/

---

Perhaps I'm not understanding the question, but couldn't you simply add a "clear: both" to the 4th card?

---

Solution 1:

Add clear: both to the 3n+1 elements, using .card:nth-child(3n+1) { clear: both } or manually adding a class where needed.

Solution 2:

Instead of float: left on .card, use display: inline-block; vertical-align: top. You'll also need to reduce the margin-right to 16px.

If you need to support IE7, then display: inline-block needs to be display:inline-block; *display:inline; zoom:1.

---

You must define the "rows" somehow. You can set the same height of each div (thus setting row-height), or you can place a null height separator, or you can set clear:left for every 3rd div starting from the first one.

---

clear:both set with an nth-child selector is what you are after.

You can dynamically add a class, using the nth-child selector with jQuery for older browsers that don't support it natively: http://api.jquery.com/nth-child-selector/

---

Use the :nth-child selector in combination with clear:both. The following will clear every third card. This will work reliably since you're using a fixed width (910px).

.card:nth-child(3n+1) {
  clear: both;
}

Simply add the rule to your existing CSS. Tested in Firefox, Chrome, and IE: jsfiddle

---

Solution 1

If you're really averse to touching your mark-up, you could use some jQuery as such (Thanks to thirtydot for the tip):

Jquery

$('.card:nth-child(3n+1)').css('clear','left');

---

Solution 2

It might be cleaner (and more backwards-compatible) to just slightly alter your HTML. Perhaps wrap each row in its own wrapper, with a clearfix applied to that.

jsfiddle: http://jsfiddle.net/leifparker/sh4fR/

You'll need to add the 'clearfix' CSS code. See the fiddle.

HTML

<div id="wrap">
    <div class="cards clearfix">
        <div class="card">
            1 text text text text text text text text text text text text text text text text
            text text text text text text text text text text
        </div>
        <div class="card">
            2 text text text text text text text text text text text text text text text text
            text text text text text text text text text text
        </div>
        <div class="card">
            3 text text text text text text text text text text text text text text text text
        </div>
    </div>
    <div class="cards clearfix">
        <div class="card">
            4 text text text text text text text text text text text text text text text text
            text text text text text text text text text text
        </div>
        <div class="card">
            5 text text text text text text text text text text text text text text text text
        </div>
        <div class="card">
            6 text text text text text text text text text text text text text text text text
        </div>
    </div>