Three or more different div can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format.
- float:left; This property is used for those elements(div) that will float on left side.
- float:right; This property is used for those elements(div) that will float on right side.
Example 1: This example place three div side by side using float property.
Example 2: This example place three div side by side using float property.
Example 3: Another way to put three div side by side by using display property.
- display:table; This property is used for elements (div) which behaves like table.
- display:table-cell;This property is used for elements (div) which behaves like td.
- display:table-row;This property is used for elements (div) which behaves like tr.
- Server side and Client side Programming
- How to place two div side-by-side of the same height using CSS?
- How to add a box-shadow on one side of an element using CSS?
- CSS | caption-side Property
- How to align button to right side of text box in Bootstrap?
- CSS Float
- Comparing float value in PHP
- p5.js | float() function
- How to make elements float to center?
- Bootstrap | Float utilities with Examples
- How to move H2 Beneath H1 by using only float property ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.