JSF 2.0 , How to vertically allign children of tomahawk datalist

I am using t:datalist with JSF 2.0 to allign images horizontally . But i would like to list the properties of each image below the image vertically.Now the properties are also listed horizontally along with images. The code i use is :

    <t:dataList var="item" value="#{listItems.dataList}" id="listItems"> 
                        <h:graphicImage url="#{item.prodFileName}" width="100" height="100" />
                        <h:outputText value="#{item.prodName}" />
                        <h:开发者_JAVA百科outputText value="#{item.prodPrice}" />
            </t:dataList>

I am not able to use plain html table tag inside the datalist to list the name and price properties below the image. Found a tag named f:verbatim after some search , but i could not make it work either. Tried putting the html table tag inside a panelGroup too.

Wrap them in a left-floating <div> and put the lines below the image by <br>.

<t:dataList var="item" value="#{listItems.dataList}" id="listItems"> 
    <div class="box">
        <h:graphicImage url="#{item.prodFileName}" width="100" height="100" />
        <br /><h:outputText value="#{item.prodName}" />
        <br /><h:outputText value="#{item.prodPrice}" />
    </div>
</t:dataList>

With for example this CSS

.box {
    float: left;
    margin: 5px;
    padding: 5px;
    border: 1px solid gray;
}

Only make sure that you've a clear: left; on the containing element so that floats don't go beyond the container.

Unrelated to the problem, please keep in mind that <f:verbatim> is deprecated in JSF 2. You should not use it anymore. You also do not need it anymore. In JSF 1.0/1.1 that tag was mandatory in order to be able to use plain HTML tags in a JSF page. Since JSF 1.2 it is not mandatory anymore. You can just inline HTML tags in a JSF page there where you want without fiddling with <f:verbatim>.