Menu
To display multiple div tags in the same line, we can use the float property in CSS styles. The float property takes left, right,none(default value) and inherit as values. The value left indicates the div tag will be made to float on the left and right to float the div tag to the right.
When the flex-direction is column you could use justify-content for vertical alignment and align-items for horizontal alignment. Learn more: How to Center Elements Vertically and Horizontally in Flexbox.
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.
Float the divs in a parent container, and style it like so:
.aParent div {
float: left;
clear: none;
}<div class="aParent">
<div>
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div>
<span>destination list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
</div>Nowadays, we could use some flexbox to align those divs.
.container {
display: flex;
}<div class="container">
<div>
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div>
<span>destination list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
</div><div>
<div style="float:left;width:45%;" >
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div style="float:right;width:45%;">
<span>destination list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div style="clear:both; font-size:1px;"></div>
</div>
Clear must be used so as to prevent the float bug (height warping of outer Div).
style="clear:both; font-size:1px;
You need to float the divs in required direction eg left or right.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With