Divs won't fit in like inline-block correctly

Question

I do have a bit of HTML and css code and i want my divs(calculators) to be displayed inline with the same margin from top, but they just won't fit in the box correctly as I want to. One is situated lower than the other one and so on.

HTML

<div id="box">
    <div class="table" id="table">
        <div id="header">Kalkulatory macierzowe</div>
        <div id="row">
            <div id="table1">
                <div class="header">Wyznacznik [2x2]</div>
                <form id="row1">
                    <input type="text" class="det1" />
                    <!--first row-->
                    <input type="text" class="det1" />
                </form>
                <form id="row2">
                    <input type="text" class="det1" />
                    <!--second row-->
                    <input type="text" class="det1" />
                </form>
                <div class="count" onclick="det(2,'det1')"><a href="#">Wylicz</a>
                </div>
                <input type="text" id="calcValue2" />
            </div>
            <div id="table2">
                <div class="header">Wyznacznik [3x3]</div>
                <form id="row1">
                    <!--first row-->
                    <input type="text" class="det" />
                    <input type="text" class="det" />
                    <input type="text" class="det" />
                </form>
                <form id="row2">
                    <!--second row-->
                    <input type="text" class="det" />
                    <input type="text" class="det" />
                    <input type="text" class="det" />
                </form>
                <form id="row3">
                    <!--third row-->
                    <input type="text" class="det" />
                    <input type="text" class="det" />
                    <input type="text" class="det" />
                </form>
                <div class="count" onclick="det(3,'det')"><a href="#">Wylicz</a>
                </div>
                <input type="text" id="calcValue1" />
            </div>
            <div id="table3">
                <div class="header">Macierz odwrotna [2x2]</div>
                <form id="row1">
                    <input type="text" class="det2" />
                    <!--first row-->
                    <input type="text" class="det2" />
                </form>
                <form id="row2">
                    <input type="text" class="det2" />
                    <!--second row-->
                    <input type="text" class="det2" />
                </form>
                <div class="count" onclick="det(2,'det2')"><a href="#">Wylicz</a>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.table {
    position:relative;
    top:0;
    padding:0;
    height:100%;
    border-collapse:collapse;
}
#table {
    border-collapse:collapse;
    border-right:2px inset rgb(0, 0, 0);
    border-left:2px inset rgb(0, 0, 0);
    border-top:2px inset rgb(150, 150, 150);
    border-bottom:none;
    width:1067px;
    min-width:1067px;
    height: 599px;
    min-height: 599px;
    margin:auto;
}
#table1 {
    position:relative;
    display:inline-block;
    width:270px;
    min-width:270px;
    height:155px;
    min-height:155px;
    margin-left:3px;
    border:2px inset rgb(0, 0, 0);
    border-collapse:collapse;
    background:rgba(0, 0, 0, 0.2);
}
#table2 {
    position:relative;
    display:inline-block;
    width:300px;
    min-width:300px;
    height:155px;
    min-height:155px;
    border:2px inset rgb(0, 0, 0);
    border-collapse:collapse;
    background:rgba(0, 0, 0, 0.2);
}
#table3 {
    display:inline-block;
    width:320px;
    min-width:320px;
    height:155px;
    min-height:155px;
    border:2px inset rgb(0, 0, 0);
    border-collapse:collapse;
    background:rgba(0, 0, 0, 0.2);
}

Answer 1

Add float: left; to your #tables:

http://jsfiddle.net/ysRKR/

Answer 2

I've seen elements that are displyed as inline-block line up along the baseline in some cases. Playing with it in a jsFiddle, I was able to line them up from the top or the bottom using vertical-align. Have you tried this on your inline-block elements?

vertical-align: top;

(Changing the vertical-align value in the jsFiddle for the div CSS will show the described behavior.)