Initially, the CSS float property wasn’t designed specifically for aligning <div> elements side by side, yet it has been employed for this purpose for numerous years.
The CSS float property serves for positioning and formatting content, enabling elements to float adjacent to each other rather than stacking atop one another.
Example
“Using the float property to align <div> elements side by side:”
| <style> .mycontainer { width:100%; overflow:auto; } .mycontainer div { width:33%; float:left; } </style> |
When you modify the display property of a <div> element from block to inline-block, it eliminates the line breaks before and after the <div> elements. Consequently, they are displayed adjacent to each other instead of stacked vertically.
Example
“Utilizing display: inline-block to align <div> elements side by side:”
| <style> div { width: 30%; display: inline-block; } </style> |
