Interview Questions

How can I place multiple blocks next to each other?

CSS Interview Questions and Questions


(Continued from previous question...)

115. How can I place multiple blocks next to each other?

In theory, the following will produce 4 "columns":
<DIV style="float: left; width: 25%;">Block 1</DIV>
<DIV style="float: left; width: 25%;">Block 2</DIV>
<DIV style="float: left; width: 25%;">Block 3</DIV>
<DIV style="float: left; width: 25%;">Block 4</DIV>

Each "column" will occupy 25% of the screen. This relies on a correct implementation of float, which cannot be said of many legacy browsers. If you cannot accept display variances in older browsers, then it may be best to fall back to table-based solutions.

2. By making the block an inline element and then use text-align property

<DIV STYLE="text-align: center">
<TABLE STYLE="display: inline">
...
</TABLE>
</DIV>

This technique depends on the incorrect implementation of text-align behavior in older browsers. It will likely cease to work in future CSS-conformant browsers, and eventually it will probably not be a viable solution.

(Continued on next question...)

Other Interview Questions