Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,064
Website GitHub Mastodon Twitter

break every 2 div(s)

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>

Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

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

tye
Member
From: Pottsville, NSW
Registered: 2005-07-06
Posts: 859
Website

Re: break every 2 div(s)

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");

Offline

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

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,064
Website GitHub Mastodon Twitter

Re: break every 2 div(s)

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.


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

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

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

Re: break every 2 div(s)

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

Offline

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

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,064
Website GitHub Mastodon Twitter

Re: break every 2 div(s)

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


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

Board footer

Powered by FluxBB