Center divs inside div

Question

I have two tables inside divs inside another div:

HTML

<div class="container center">
    <div class="thing">
        <table class="tabel center" style="width:230px">
            <tr><td>Example</td></tr>
        </table>
    </div>

    <div class="thing">
        <table class="tabel center" style="width:230px">
            <tr><td>Example</td></tr>
        </table>
    </div>
</div>

CSS

.container {
    width: 100%;
    overflow: hidden;
    float: left;
    border: 1px solid red;
    text-align: center;
}
.tabel {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 5px;
}
.thing {
    width: 50%;
    float: left;
    min-width: 230px;
}

.center {
   margin: 0 auto;
}

The two cells are centered correctly

[Image deleted by host]

but when the width of the screen gets too small, the cells go underneith each other (what I want), but they no longer get centered:

[Image deleted by host]

So what I want them to look like:

[Image deleted by host]

The images are marked up like code because I'm new so apparently I can't have images or more than one link in my post. — Duncan Lukkenaer, Oct 13 '14 at 10:38
well, you set each of those `things` to have a min-width of 230px, which means you need at LEAST 460px of width to show them beside each other. Consider this the same the thing as "I have a 1 liter bottle. why does it spill when I put in 2 liters?" — Marc B, Oct 13 '14 at 10:39
Here are two simple methods to center divs within divs, vertically, horizontally or both (pure CSS): http://stackoverflow.com/a/31977476/3597276 — Michael Benjamin, Aug 20 '15 at 15:25

score 3 · Accepted Answer · answered Oct 13 '14 at 10:45

You have to remove float: left;, set display: inline-block; and eliminate white space between them.

.thing {
    width: 50%;
    display: inline-block;
    /* float: left; */
    min-width: 230px;
    vertical-align: top;
}

fiddle: http://jsfiddle.net/3g7xk0sj/1/

score 0 · Answer 2 · answered Oct 13 '14 at 10:46

0

Just use media query http://jsfiddle.net/3g7xk0sj/3/

@media all and (max-width: 480px) {
    .thing {
        width: 100%;
    }
}

answered Oct 13 '14 at 10:46

Bojan Petkovski

6,835
1
25
34

score 0 · Answer 3 · answered Oct 13 '14 at 10:50

The problem you are facing is that you are telling each floating DIV (class thing) to be 50% width a minimum of 230px, but it will never span to 100% of the container's width (unless the container is also 230px wide). So the auto margin will only be applied within class .thing's width, which is 230px. Now add to that your table that is ALSO 230px wide, no margin will ever be rendered and consequently you tables will never float in the center.

Try using a CSS media query instead to force a 100% width on class thing when the screen size goes below 460px (230px*2).

Alternatively, use display: inline-block instead of floating, as emmanuel suggested.

score -1 · Answer 4 · answered Oct 13 '14 at 10:44

-1

Remove float:left & use margin:0 auto in thing class

answered Oct 13 '14 at 10:44

Jobayer

1,221
1
14
22

score -1 · Answer 5 · answered Oct 13 '14 at 10:49

Demo http://jsfiddle.net/3g7xk0sj/4/

.container {
    width: 100%;
    overflow: hidden;
    float: left;
    border: 1px solid red;
    text-align: center;
}
.tabel {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 5px;
}
.thing {
    margin: 0 auto;
    width: 50%;
}



<div class="container center">
    <div class="thing">
        <table class="tabel center" style="width:100%">
            <tr><td>Example</td></tr>
        </table>
    </div>

    <div class="thing">
        <table class="tabel center" style="width:100%">
            <tr><td>Example</td></tr>
        </table>
    </div>
</div>

Center divs inside div

5 Answers5