CSS elements single row/line

A parent element will have white-space: nowrap; and child element will have display:inline-block;. Do not use float in this case.

<style>
#childWrapper {
width: 500px;
margin: 0;
padding: 0;
overflow: hidden;
white-space: nowrap;
}

#childWrapper > div {
//float: left; /*do not use. If used, this will break the line.
width: 150px;
height: 90px;
background-color: red;
display:inline-block;
}

#childWrapper > div:nth-child(even) {
background-color: blue;
}
</style>

<div id="childWrapper">
<div>Box #1</div>
<div>Box #2</div>
<div>Box #3</div>
<div>Box #1</div>
<div>Box #2</div>
<div>Box #3</div>
<div>Box #1</div>
<div>Box #2</div>
<div>Box #3</div>
<div>Box #1</div>
<div>Box #2</div>
<div>Box #3</div>
</div>

Labels: CSS, Web development

Edit This post