3 Responsive Div Boxes Side By Side - Not Staying Together

Hi i need help figuring this out. I have 3 divs that need to stay side by side regardless of how big or small the screen is, but the problem is that, once the screen's width reache

Solution 1:

One way to fix this would be to wrap the divs in a container, and give that container a white-space:nowrap;text-align:center rule. Then change the divs from floating to display:inline-block;.

jsFiddle example

.box {
    background-color: coral;
    width: 30%;
    display:inline-block;
    margin:10px0;
    border-radius:5px;
}
.text {
    padding: 10px0;
    color:white;
    font-weight:bold;
    text-align:center;
}
#container {
    white-space:nowrap;
    text-align:center;
}

Solution 2:

For a safer responsive layout, work with display:table on a wrapper div, and change the box to display:table-cell. For the padding, add a middle div, and set the width in percentual value. Also, you won't even need to set the box width.

http://jsfiddle.net/32hcm/9/

HTML:

<divclass="wrapper"><divclass="box"><divclass="text">Text</div></div><divclass="middle"></div><divclass="box"><divclass="text">Text</div></div><divclass="middle"></div><divclass="box"><divclass="text">Text</div></div></div>

CSS:

.box{
    background-color: coral;
    display: table-cell;
    border-radius:5px;
}
.text{
    color:white;
    font-weight:bold;
    text-align:center;
    padding: 10px0;
}

.wrapper {
    display: table;
    width: 100%;
}

.middle {
    display: table-cell;
    width: 10%;
}

Solution 3:

The problem is with your fixed margin of 10px. Change it to percent value, and adjust the width percentual also, and it will work fine.

.box{
    background-color: coral;
    width: 28%;    
    float:left;
    margin:1%;
    border-radius:5px;
}
.text{
    padding: 10px0;
    color:white;
    font-weight:bold;
    text-align:center;
}

http://jsfiddle.net/32hcm/5/

Solution 4:

Use table-cell

and have a container to be set to 100%:

.core {width: 100%; display: table; border-spacing: 10px;}

.box{
    background-color: coral;
    width: 32.03125%; 
    float:none;
    display: table-cell;
    border-radius:5px;
}

FIDDLE