Search code examples
csshtmlcenter

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

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
Solution

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