How can I place items in different (already existing) columns based upon a css class?

Question

This is NOT a question about how to create columns in css - so please dont give me any css for doing that. I've just excluded it here for readability.

I have created two columns in css and I want to place items in them based upon some css class. I think this is possible but I'm not sure how.

<DIV id="col1">
   <!-- I want to display everything with 'women' here -->
</DIV>

<DIV id="col2">
   <!-- I want to display everything with 'men' here -->
</DIV>

<!-- this content is dynamically generated in a loop (PHP/ASP.NET)-->
<DIV id="products">
    <DIV class="women">
       Women's product 1        
    </DIV>
    <DIV class="men">
       Men's product 1        
    </DIV>
    <DIV class="men">
       Men's product 2        
    </DIV>
</DIV>

Edit: Just to be sure I don't want to duplicate the product list into col1 and col2. i want to move them. I only want once visible copy of each item.

So I have two columns - or areas on the page - whatever - doesn't matter for this.

I want to use css to take everything under .products.women and put it in column 1.

I want to use css to take everything under .products.men and put it in column 2.

How can I do this. These kinds of things are about my limit to css, but I know theres some cleverness I can use.

Currently I'm rendering into the columns in two separate for loops. I want to get away from this for two reasons :

• I dont want to maintain 2 identical for loops - nor move that logic elsewhere
• I want to make an 'iphone' friendly version and i figure this will make that easier.

Answer 1

You can't do precisely what you're asking for with CSS. But you can do .women { float: left } .men { float: right}, which may be just about as good.

This is kind of a band-aid on your fundamental problem, though, which is failure to separate your presentation logic from your control logic. Instead of having two identical for loops in your presentation logic, you should have one for loop outside of it that builds two arrays, then your presentation logic should use each the way that would actually be beneficial to it.

Answer 2

CSS it's a language used to describe the presentation of the (existing) content. You are asking for programaticaly DUPLICATE or COPY some of that content.

You can either use ASP/PHP whatever languaje of choice to generate multiple copies of that content, or use javascript to copy-move-change it.

Actually javascript seems to fit your scenario.

EDIT: you have a similar previous question here: using css to duplicate html elements

Answer 3

Interestingly (but, at this point, completely uselessly), this is not only possible in the current draft of the CSS3 Advanced Layout Module (aka Template Layout), but the spec contains an example showing how to do exactly that (last example in section 3.4). So if you can stand to wait a fifteen years or so...