To align div horizontally, one solution is to use css float property. But a better solution is to to use CSS display:inline-block on all divs which needs to be aligned horizontally and place them in some container div.
Here is are some examples.
inline-block divs with default vertical-align
Default vertical-align value is baseline. Note that here baseline of all divs are aligned to baseline of parent div.
<style type="text/css" media="screen">
.outer {background-color:lightgray;}
.outer > * {
display:inline-block;
background-color:lightgreen;
}
.one {width:80px; height:80px;}
.two {width:80px; height:80px;}
.three {width:80px; height:100px;}
</style>
<div class="outer">
<div class="one">Some text that will wrap</div>
<div class="two">hello</div>
<div class="three">world</div>
</div>inline-block divs with vertical-align:middle
Here we are using vertical-align:middle. This way all inline-block divs are aligned at middle.
<style type="text/css" media="screen">
.outer {background-color:lightgray;}
.outer > * {
display:inline-block;
vertical-align:middle;
background-color:lightgreen;
}
.one {width:80px; height:80px;}
.two {width:80px; height:80px;}
.three {width:80px; height:100px;}
</style>
<div class="outer">
<div class="one">Some text that will wrap</div>
<div class="two">hello</div>
<div class="three">world</div>
</div>
