CODEWITHSUNDEEP
htmlcssmobile
frog
frog

Reputation: 93

CSS mobile responsive div table wont float next to each other

I'm totally mindblocked and need YOUR help! Can anyone explain me why those div wont float next to each other?

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

and this looks like this. the goal is to make those divs float next to each other.

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

really apprieciate the help.

Upvotes: 0

Views: 833

Answers (1)

Brant
Brant

Reputation: 1788

Your parent divs are block level elements. You've got to change them to inline-block elements. Give them a width, something like 33% each. And float them left. More specifically:

div.row1, div.row2, div.row3, ... {
display: inline-block;
float: left;
width: 33%; // or whatever
}

And your div.table needs to be 100% wide since it's the parent container:

div.table {
width: 100%;
}

And use media queries to alter the div.ro1, div.row2, etc. widths to 100% at smaller screen sizes so they stack.

Upvotes: 2

Related Questions