HTML DIV inline-block

Question

I have this code:

<div style="margin-top: 5px"></div>
<div style="width:175px; height: 25px; margin: 0 auto; background-color:#fff;">
    <div style="font-weight: bold; text-align: center; width: 175px; height: 50px; margin:0; font-family: 'Droid Sans', sans-serif; color:#666666; font-size:12px; border:0; height:100%; line-height: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
        Top 5 Números Sorteados
    </div>
</div>
<center>
<div style="margin-top: 1.5px"></div>
<div style="display:inline-block; width:55px; height: 100%; background-color:#fff; ">
    <div style="font-weight: bold; text-align: center; width: 55px; height: 100%; font-family: 'Droid Sans', sans-serif; color:#666666; font-size:12px; height:100%; line-height: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
        <p>1.</p>
        <p>2.</p>
        <p>3.</p>
        <p>4.</p>
        <p>5.</p>
    </div>
</div>
<div style="display:inline-block; width:56px; height: 100%; background-color:#fff; ">
    <div style="font-weight: bold; text-align: center; width: 56px; height: 100%; font-family: 'Droid Sans', sans-serif; color:#666666; font-size:12px; height:100%; line-height: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
        <p>1.</p>
        <p>2.</p>
        <p>3.</p>
        <p>4.</p>
        <p>5.</p>
    </div>
</div>
<div style="display:inline-block; width:55px; height: 100%; background-color:#fff; ">
    <div style="font-weight: bold; text-align: center; width: 55px; height: 100%; font-family: 'Droid Sans', sans-serif; color:#666666; font-size:12px; height:100%; line-height: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
        <p>1.</p>
        <p>2.</p>
        <p>3.</p>
        <p>4.</p>
        <p>5.</p>
    </div>
</div>
</center>

This gives me the following output: http://jsfiddle.net/VmBR7/

I'd like to know how can I make the 3 divs that are inline without that kind of a border. I've been searching for the style options but can't find anything that can produce that. Thanks

Answer 1

Inline-block elements render themselves with a border. This can be found here

In order to acheive the required I removed the inline-block display property from the div elements and instead made them to float:left

Then i wrapped all the there bottom div elemets into a parent div which uses a similar styling as the top div element

Using inline styles is also not advisable i refactored some..

So here is the JSFIDDLE