html - CSSモバイルレスポンシブdivテーブルが隣同士に浮かない

Question

私は完全にマインドブロックされており、あなたの助けが必要です! これらの div が隣り合って浮かない理由を誰か説明できますか?

        <div class="table">
        <div class="row1">
            <div class="tableCellHead" id="tableDayA">Datum - Tag</div>
            <div class="tableCellHead" id="tableHead">BL</div>
            <div class="tableCellHead" id="tableHead">2. BL</div>
            <div class="tableCellHead" id="tableHead">Pokal</div>
            <div class="tableCellHead" id="tableHead">UCL</div>
            <div class="tableCellHead" id="tableHead">UEL</div>
            <div class="tableCellHead" id="tableHead">FIFA</div>
            <div class="tableCellHead" id="tableHead">A-Länderspiele</div>
            <div class="tableCellHead" id="tableHead">U21-Länderspiele</div>
            <div class="tableCellHead" id="tableHead">Sonstiges</div>
        </div>
        <div class="row2">
            <div class="tableCell" id="tableDay">Montag, 07.10.2013</div>
            <div class="tableCell" id="tableContent1">lorem</div>
            <div class="tableCell" id="tableContent1">lorem</div>
            <div class="tableCell" id="tableContent1">lorem</div>
            <div class="tableCell" id="tableContent1">lorem</div>
            <div class="tableCell" id="tableContent1">lorem</div>
            <div class="tableCell" id="tableContent1">lorem</div>
            <div class="tableCell" id="tableContent1">lorem</div>
            <div class="tableCell" id="tableContent1">lorem</div>
            <div class="tableCell" id="tableContent1">lorem</div>
        </div>
        <div class="row3">
            <div class="tableCell" id="tableDay">Dienstag, 08.10.2013</div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
        </div>
        <div class="row4">
            <div class="tableCell" id="tableDay">Mittwoch, 09.10.2013</div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
        </div>
        <div class="row5">
            <div class="tableCell" id="tableDay">Donnerstag, 10.10.2013</div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
        </div>
        <div class="row6">
            <div class="tableCell" id="tableDay">Freitag, 11.10.2013</div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
        </div>
        <div class="row7">
            <div class="tableCell" id="tableDay">Samstag, 12.10.2013</div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
        </div>
            <div class="row8">
            <div class="tableCell" id="tableDay">Sonntag, 13.10.2013</div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
        </div>
    </div>

.

@media screen and (max-width: 480px) {
body {

}
div#tableDayA {
    margin: 0 auto;
    width: 100%;
    height: 50px;
    background-color: red;
}

div#tableHead {
    clear: left;
    float: left;
    margin: 2px 2px 2px 0px;
    background: green;
    width: 49%;
    display: block;
}

div#tableContent1 {
    clear: right;
    margin: 2px 0px 2px 2px;
    float: right;
    background: pink;
    width: 49%;
    display: block;
}

div#tableDay {
    position: absolute;
    top: 500px;
    float: right;
    background-color: blue;
}
}

これはこのように見えます。目標は、これらの div を隣同士にフロートさせることです。

http://postimg.org/image/58j541f63/

本当に助かります。