CSS - Make divs align horizontally
You can now use css flexbox to align divs horizontally and vertically if you need to. general formula goes like this
parent-div {
display: flex;
flex-wrap: wrap;
/* for horizontal aligning of child divs */
justify-content: center;
/* for vertical aligning */
align-items: center;
}
child-div {
width: /* yoursize for each div */
;
}
style="overflow:hidden"
for parent div
and style="float: left"
for all the child divs
are important to make the divs
align horizontally for old browsers like IE7 and below.
For modern browsers, you can use style="display: table-cell"
for all the child divs
and it would render horizontally properly.
You may put an inner div in the container that is enough wide to hold all the floated divs.
#container {
background-color: red;
overflow: hidden;
width: 200px;
}
#inner {
overflow: hidden;
width: 2000px;
}
.child {
float: left;
background-color: blue;
width: 50px;
height: 50px;
}
<div id="container">
<div id="inner">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>