Category: CSS

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.

Repaint vs Reflow

Repaint is just affect the DOM itself, but reflow affect the whole page. Repaint occur when some changes which only its skin styles, such as color and vibility. Reflow occur when the page of DOM changes its layout.

This link provides list of css triggers attribute will trigger repaint or reflow.