Question

So, I’m trying to making some content fit nicely into another container.

My CSS: (The boxes that say ‘test’ are id=’resultBox’)

#resultBox{
    display: block;
    position:absolute;
    width:20%;
    margin:0px;
    padding:0px;
}

But this looks bad, it’s all cramped, however, I want there to be 5 boxes per line, is there a way I can give a margin, and make it automatically adjust the width%?

Picture related: The top one is the margin I want, but the bottom is the behaviour I want.

Answer 1

What about this table-less table implementation?

http://jsfiddle.net/Wexcode/xKj8n/

<div id="table">
    <div class="row">
        <div><span>Test</span></div>
        <div><span>Test</span></div>
        <div><span>Test</span></div>
        <div><span>Test</span></div>
        <div><span>Test</span></div>
    </div>
</table>

Edit:

You can also do this without rows if you’re willing to sacrifice compatibility with IE8 and use nth-child() selectors (you could always apply classes using JavaScript):

http://jsfiddle.net/Wexcode/xKj8n/2/

<div id="table">
    <div><span>Test</span></div>
    <div><span>Test</span></div>
    <div><span>Test</span></div>
    <div><span>Test</span></div>
    <div><span>Test</span></div>
</div>​