How do you centre a group of divs inside a containing div?

Question

I have a group of columns that need to be centred inside a container div with a background colour of #eeeff3 so that when you zoom out the columns stay the same size and centred and the grey background stays 100% width.click the link to see the current html and css! jsfiddle

Can anyone shed some light on the situation?

jsfiddle links require code

Please post your HTML & Current CSS. – Paulie_D Mar 10 '14 at 11:56 — Paulie_D, Mar 10 '14 at 11:56

score 4 · Accepted Answer · edited Mar 10 '14 at 12:09

4

Remove float:left and add display:inline-block.

See updated jsfiddle

.container{
     margin:0 auto;
     background: #eeeff3;
     width:100%;
     height:400px;
     text-align:center;
}
.col4{
    width:270px;
    height:400px;
    border-right:2px solid white;
    display:inline-block;
}

edited Mar 10 '14 at 12:09

zoranc

2,410
1
21
34

answered Mar 10 '14 at 12:00

SajithNair

3,867
1
17
23

1

+1 Also mind the [gap between inline(-block) elements](http://stackoverflow.com/questions/21875226/space-between-nowrap-inline-blocks/21875532#21875532). – Hashem Qolami Mar 10 '14 at 12:03

score 1 · Answer 2 · answered Mar 10 '14 at 12:01

.container{
     margin:0 auto;
     background: #eeeff3;
     width:100%;
     height:400px;
     text-align:center;
}
.col4{
    width:270px;
    height:400px;
    border-right:2px solid white;
    display:inline-block;
}

score 0 · Answer 3 · answered Mar 10 '14 at 12:00

Try this css work well:

.container{
     margin:0 auto;
     background: #eeeff3;
     width:100%;
     height:400px;
     text-align:center;

}
.col4{
    float:left;
    width:270px;
    height:400px;
    border-right:2px solid white;
    display:inline-block;
}

How do you centre a group of divs inside a containing div?

3 Answers3