Css Tips #3 :Stop floating divs from wrapping

If you want to display divs in a row horizontally, sometimes we use float:left. This has problems with wrapping to container div. This can work if the parent container has width or min-width defined. But the width of the parent needs to be equal to the total of its children including the margins/paddings/borders. And also overflow:auto. The reason to use overflow:auto is that to match the height of its child.

Such as:

.row {
  float: left;
  border: 1px solid yellow;
  width: 100%;
  overflow: auto;
}
.cell {
  float: left;
  border: 1px solid red;
  width: 200px;
  height: 100px;
}

//solution
.row{
  width:600px;
  overflow:auto
}

A

Alternative way to do this is to use the display:inline-block . Where row element has white-space:nowrap.

.row {
    float:left;
    border: 1px solid yellow;
    width: 100%;
    overflow: auto;
    white-space: nowrap;
}

.cell {
    display: inline-block;
    border: 1px solid red;
    width: 200px;
    height: 100px;
}
</style>

inline-block

inline-block makes the element inline but preserves the settings such as width, height, top and bottom margins, paddings.

This article tells more about inline-block.