How to use float property In CSS
- In this approach, we will use float property.
- These are the values that can be used to align divs:
- float: left; This property is used for those elements(div) that will float on the left side.
- float: right; This property is used for those elements(div) that will float on the right side.
- we will use the property for the alignment.
Example: This example places three divs side by side using the float property.
html
<!DOCTYPE html> < html > < head > <!-- CSS property to place div side by side --> < style > #leftbox { float: left; background: Red; width: 25%; height: 280px; } #middlebox { float: left; background: Green; width: 50%; height: 280px; } #rightbox { float: right; background: blue; width: 25%; height: 280px; } h1 { color: green; text-align: center; } </ style > </ head > < body > < div id = "boxes" > < h1 >w3wiki</ h1 > < div id = "leftbox" > < h2 >Learn:</ h2 > It is a good platform to learn programming. It is an educational website. Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. </ div > < div id = "middlebox" > < h2 >w3wiki:</ h2 > The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful. </ div > < div id = "rightbox" > < h2 >Contribute:</ h2 > Any geeks can help other geeks by writing articles on the w3wiki, publishing articles follow few steps that are Articles that need little modification/improvement from reviewers are published first. </ div > </ div > </ body > </ html > |
Output:
How to float three div side by side using CSS?
In this article, we are going to learn how to float three divs side by side using CSS. Three or more different divs can be put side-by-side using CSS. Use the CSS property to set the height and width of the div and use the display property to place the div in a side-by-side format.
These are the following ways to solve this problem:
Table of Content
- Using float property
- Using display property