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);
}

If the 3-4px of horizontal whitespace between the columns is a problem, then float the columns as PabloLemurr suggests. Otherwise, add `vertical-align:top` as KevinBoucher suggests. If in doubt, see the following discussion: http://stackoverflow.com/a/16469536/1306809 — Matt Coughlin, May 10 '13 at 19:18

score 2 · Answer 1 · answered May 10 '13 at 19:06

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.)

answered May 10 '13 at 19:06

Kevin Boucher

16,426
3
48
55

`inline-block`s, by default *always* align to the baseline. The tricky bit sometimes is figuring out where the baseline is, and what it is about the inline-block that's being aligned to the baseline. Anyway, good answer, +1. – Alohci May 10 '13 at 21:36

score 1 · Answer 2 · answered May 10 '13 at 19:08

1

Add float: left; to your #tables:

http://jsfiddle.net/ysRKR/

answered May 10 '13 at 19:08

Lemur

2,659
4
26
41

Divs won't fit in like inline-block correctly

2 Answers2