How to set overflow content to go underneath instead of fitting in one row

Question

I have an XSL file set up:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template name="homeArticleThumb" match="/">
    <xsl:for-each select="Collection/Content">
        <div class="setTableCell vertAlignT">
            <div class="articleTeaserHolder">
                <div class="imgHolder">
                    <xsl:variable name="imageSrc" select="Html/root/NewsArticle/artThumb/img/@src" />
                    <xsl:variable name="imageId">
                        <xsl:text>NewsArticle_</xsl:text>
                        <xsl:value-of select="ID" />
                        <xsl:text>_image</xsl:text>
                    </xsl:variable>
                    <xsl:variable name="contentTitle" select="Html/root/NewsArticle/artTitle" />
                    <a href="{QuickLink}" title="{Html/root/NewsArticle/artTitle}">
                        <img id="{ $imageId }" class="imgArtThumb" title="{ $contentTitle }" alt="{ $contentTitle }" src="{ $imageSrc }" />
                    </a>
                </div>
                <div class="textHolder">
                    <div class="textHolderTop">
                        <a href="{QuickLink}" title="{Html/root/NewsArticle/artTitle}" class="defaultLinks setBold">
                            <xsl:value-of select="Html/root/NewsArticle/artTitle"/>
                        </a>
                    </div>
                    <div class="textHolderBottom">
                        <xsl:value-of select="Html/root/NewsArticle/artTeaser" />
                    </div>
                </div>
            </div>
        </div>
    </xsl:for-each>
</xsl:template>
</xsl:stylesheet>

CSS:

.setTableCell
{
    display: table-cell;
}
.imgHolder
{
    float: left;
    display: inline-block;
    width: 43%;
    height: 100%;
    padding: 1% 2% 0 0;
}
.vertAlignT
{
    vertical-align: top;
}
.textHolder
{
    float: left;
    display: inline-block;
    width: 55%;
    height: 100%;
}
.textHolderTop
{
    width: 100%;
    height: 48%;
    text-align: left;
    padding-bottom: 2%;
    overflow: hidden;
}
.textHolderBottom
{
    width: 100%;
    height: 46%;
    overflow: hidden;
    text-align: left;
    padding-top: 2%;
    padding-bottom: 2%;
}


@media only screen and (max-width: 820px) {
    .setTableCell {
        display: block;
    }
}

I call the above XSL using this line:

<CMS:Collection ID="id123" runat="server" DefaultCollectionID="128" DisplayXslt="art.xsl" GetHtml="true" />

Displays this:

In the future I might need to add more contents to that collection so instead of 4 articles it might be 6 or 7 or... as many number of articles.

How can I modify the XLS file so that it will always display two article per row and go to the next row for the next two and next row for the next two and so forth.

Answer 1

I modified my XSL file as follow:

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/Collection">
        <table class="serviceHolder hidOverflow">
            <xsl:for-each select="Content[position() mod 2=1]">
            <xsl:variable name = "current-pos" select="(position()-1) * 2+1"/>
            <tr class="section group vertAlignT">
            <xsl:for-each select="../Content[position()&gt;=$current-pos and position() &lt; $current-pos+2]" >
                <td class="col span_half">
                    <table>
                        <tr class="section group vertAlignT">
                            <td class="col span_1_of_3 span_pad_right vertAlignT">
                                <xsl:variable name="imageSrc" select="Html/root/NewsArticle/artThumb/img/@src" />
                                <xsl:variable name="imageId">
                                    <xsl:text>NewsArticle_</xsl:text>
                                    <xsl:value-of select="ID" />
                                    <xsl:text>_image</xsl:text>
                                </xsl:variable>
                                <xsl:variable name="contentTitle" select="Html/root/NewsArticle/artTitle" />
                                <a href="{QuickLink}" title="{Html/root/NewsArticle/artTitle}">
                                    <img id="{ $imageId }" class="imgArtThumb" title="{ $contentTitle }" alt="{ $contentTitle }" src="{ $imageSrc }" />
                                </a>                            
                            </td>
                            <td class="col span_2_of_3 span_pad_left vertAlignT">
                                <table>
                                    <tr>
                                        <td>
                                            <a href="{QuickLink}" title="{Html/root/NewsArticle/artTitle}" class="defaultLinks setBold">
                                                <xsl:value-of select="Html/root/NewsArticle/artTitle"/>
                                            </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><xsl:value-of select="Html/root/NewsArticle/artTeaser" /></td>
                                    </tr>
                                </table>                            
                            </td>
                        </tr>
                    </table>
                </td>
            </xsl:for-each>
            </tr>           
           </xsl:for-each>         
        </table>
    </xsl:template>
</xsl:stylesheet>

I use the position() mod 2=1 to put a break after every 2nd entry.

Answer 2

For example if you add in your class css:

. articleTeaserHolder
{
    max-height:50px;
    overflow:auto;
}

all text and image have a max-height in 50px and when image an text have more content overflow automatic add