break every 2 div(s)

colak · 2013-05-27 18:09:51

I have a display problem with floating divs.

What I would like is for the divs which are different heights to appear in pairs. Currently the divs appear messy as the divs get stuck under the second ‘column’. Is there a css or txp way to add a clear:both every two grid_12 divs?

My code currently is

<txp:images category="cite" limit="999" sort="alt desc">
<div class="grid_12">
<txp:thumbnail class="grid_3 alpha" />
<div class="grid_9 omega"><txp:image_info type="caption" escape="" /></div>
</div>
</txp:images>

tye · 2013-05-27 22:57:14

I’ve used this plugin in the past zem_nth for exactly the same problem

Or even something like this in jquery (not tested ) $('.grid_12>div:even').css("clear", "both");

colak · 2013-05-28 05:49:53

Hi Tye, I found that the solution was easier. All I needed to do was to add height:250px;min-height:250px; in the css.

philwareham · 2013-05-28 07:18:06

You can probably use CSS nth-of-type to achieve that too.

colak · 2013-05-28 09:44:45

Hi Phil, I considered that too but as ie does not support it without javascript i used this little css.

Textpattern CMS

Textpattern CMS support forum

#1 2013-05-27 18:09:51

break every 2 div(s)

#2 2013-05-27 22:57:14

Re: break every 2 div(s)

#3 2013-05-28 05:49:53

Re: break every 2 div(s)

#4 2013-05-28 07:18:06

Re: break every 2 div(s)

#5 2013-05-28 09:44:45

Re: break every 2 div(s)

Board footer