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
- 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 >GeeksforGeeks</ 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 >GeeksforGeeks:</ 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 GeeksforGeeks, publishing
articles follow few steps that are Articles
that need little modification/improvement
from reviewers are published first.
</ div >
</ div >
</ body >
</ html >
|
Output:
Using display property
- In this approach, we will use the display property.
-
These are the values tthat can be used for the alignment:
- 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 tc.
- display:table-row;This property is used for elements (div) which behaves like tr.
- We will use this for alignment.
Example: Another way to put three div side by side by using display property.
html
<!DOCTYPE html> < html >
< head >
<!-- CSS style to place three div side by side -->
< style >
.container .box {
width: 540px;
margin: 50px;
display: table;
}
.container .box .box-row {
display: table-row;
}
.container .box .box-cell {
display: table-cell;
width: 33%;
padding: 10px;
}
.container .box .box-cell.box1 {
background: green;
color: white;
text-align: justify;
}
.container .box .box-cell.box2 {
background: lightgreen;
text-align: justify
}
.container .box .box-cell.box3 {
background: lime;
text-align: justify;
}
</ style >
</ head >
< body >
< center >
< h1 style = "color:green;" >GeeksforGeeks</ h1 >
< div class = "container" >
< div class = "box" >
< div class = "box-row" >
< div class = "box-cell box1" >
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 class = "box-cell box2" >
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 class = "box-cell box3" >
Any geeks can help other geeks by writing
articles on the GeeksforGeeks, publishing
articles follow few steps that are Articles
that need little modification/improvement
from reviewers are published first.
</ div >
</ div >
</ div >
</ div >
</ center >
</ body >
</ html >
|
Output: