Question

I am solving a problem where I am trying to create a horizontal tumblr theme with automatic paging. I am using pretty simple table for layout:

<table><tr>
    <!--each post is here--><td></td><!--To here-->
</tr></table>

But here is the problem. Javascript for automatic paging works really simple. You have to put posts into div, but you cannot put div into tr or table. If I put whole table in the div, horizontal layout naturally breaks. Any idea how to solve this problem?

<div class="repeating-div">    
    <table><tr>
        <!--each post is here--><td></td><!--To here-->
    </tr></table>
</div>

EDIT: It’s external script not written by me, therefore it I have to put class on div instead of row and I really do not want to spend time writing new javascript code

Answer 1

Add display:inline-block to your DIVs. Using this property, multiple DIVs will tolerate each other, horizontally.

It’s not recommended to use tables for non-tabulair data. If you want to add “table-behaviour” (appearance) to your elements, use display:table plus display:table-row and/or display:table-cell.