product page with 2 colums

Gallex · 2008-09-20 12:34:35

i have a product page and i want to display products in 2 columns like this:

1 2
3 4
5 6
…

problem is: then 1 is longer than 2, the 3 stucks behind 1
take a look

i tryed pseudo class :after but it didn’t help.

i think the solution would be to get 1 and 2, 3 and 4, and so on into one div, but i can’t to think out how?

my product page:

<txp:if_section name=“teraviljatooted”>
<txp:article form=“tooted” limit=“999” />
</txp:if_section>

and form tooted:

<div class=“kuulutus”>
<txp:if_article_list>
<txp:upm_article_image type=“popup” limit=“1” />
<h6><txp:title /></h6>
<txp:body />
<p><a href=“http://www.eestimahe.ee/tellimine”>Telli >></a></p>
</txp:if_article_list>
</div>

can you help me or maybe you have better solution?

els · 2008-09-20 13:06:36

Maybe you could use zem_nth to insert a div/br/whatever with clear:both;/clear:left; after every 2nd article?

Last edited by els (2008-09-20 13:09:02)

masa · 2008-09-20 16:03:47

Els is right, that should work.

However have you considered simply giving them a specific height? IMHO it makes the design look neater if they’re all the same.

Gallex · 2008-09-21 08:59:31

masa wrote:

Els is right, that should work.
However have you considered simply giving them a specific height? IMHO it makes the design look neater if they’re all the same.

yeah, but i’m afraid that some products descriptions can be double as long as those on my page

Gallex · 2008-09-21 09:30:43

Els wrote:

Maybe you could use zem_nth to insert a div/br/whatever with clear:both;/clear:left; after every 2nd article?

i installed it and i’m almost there…but this big gap between 2 and 3 appears now :(
take a look

my article form:

<div class=“kuulutus”>
<txp:if_article_list>
<txp:upm_article_image type=“popup” limit=“1” />
<h6><txp:title /></h6>
<txp:body />
<p class=“telli”><a href=“http://www.eestimahe.ee/tellimine”>Telli >></a></p>
</txp:if_article_list>
</div>
<txp:zem_nth step=2 of=2><div style=“clear:both;”></div></txp:zem_nth>

masa · 2008-09-21 11:27:34

It happens because your sidebar is floated. The clearing element cancels all floats and causes the product containers to drop below the bottom of the sidebar.

I’ve come across this a few times, but I’m not sure what the most elegant solution is. I think you should be able to wrap pairs of product containers in a div instead of inserting a clearing element. You could also position the sidebar absolutely instead of floating it, but personally I try to avoid absolute positioning.

Perhaps someone else will have a better idea.

els · 2008-09-21 11:48:34

You can do something like this, the only problem is that probably at the end of the list you’ll end up with an empty div. You’d have to test it though.

<txp:if_first_article><div class="row"></txp:if_first_article>
<div class="kuulutus">
<txp:upm_article_image type="popup" limit="1" />
<h6><txp:title /></h6>
<txp:body />
<p class="telli"><a href="http://www.eestimahe.ee/tellimine">Telli >></a></p>
</div>
<txp:zem_nth step=2 of=2></div><div class="row"></txp:zem_nth>
<txp:if_last_article></div></txp:if_last_article>

CSS: .row {float: left;}

Edit: it might be something smd_if can solve.

Last edited by els (2008-09-21 11:51:56)

Gallex · 2008-09-21 12:57:32

Els wrote:

You can do something like this, the only problem is that probably at the end of the list you’ll end up with an empty div. You’d have to test it though.

yes, it ended up with an empty div but that’s not problem at all – it works and this is the main!
how? it’s just beyond my mind :) thank you els!

masa: I’ve come across this a few times, but I’m not sure what the most elegant solution is. I think you should be able to wrap pairs of product containers in a div instead of inserting a clearing element.

masa: yes, it came into my head at thirst place too, but how to get those pairs of products into one container div…?
it seems me the most elegant way to solve this. can anyone work out this?

masa · 2008-09-21 13:13:26

Gallex wrote:

masa: yes, it came into my head at thirst place too, but how to get those pairs of products into one container div…?
it seems me the most elegant way to solve this. can anyone work out this?

That’s what Els’ code does… or did I misunderstand you?

Gallex · 2008-09-22 12:26:26

masa wrote:

That’s what Els’ code does…

of course! sorry, sorry :)

Textpattern CMS

Textpattern CMS support forum

#1 2008-09-20 12:34:35

product page with 2 colums

#2 2008-09-20 13:06:36

Re: product page with 2 colums

#3 2008-09-20 16:03:47

Re: product page with 2 colums

#4 2008-09-21 08:59:31

Re: product page with 2 colums

#5 2008-09-21 09:30:43

Re: product page with 2 colums

#6 2008-09-21 11:27:34

Re: product page with 2 colums

#7 2008-09-21 11:48:34

Re: product page with 2 colums

#8 2008-09-21 12:57:32

Re: product page with 2 colums

#9 2008-09-21 13:13:26

Re: product page with 2 colums

#10 2008-09-22 12:26:26

Re: product page with 2 colums

Board footer