How to create three boxes in the same div using HTML and CSS ?
Last Updated :
30 Jan, 2024
We can place three or more different divs side by side in the same div using CSS. You can achieve this using Flexbox, but you need to use wrapper divs and apply different flex directions to each of them to make the grid layout work. You can set the height and width of the div by using CSS properties.
Syntax:
flex: flex-grow flex-shrink flex-basis | auto | initial | inherit;
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
flex-grow: number | initial | inherit;
Example 1: This example illustrates how to create 3 boxes in the same div with regular HTML and CSS.
HTML
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf-8">
<title>
How to create 3 boxes
in the same div using
HTML and CSS ?
</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 2%;
justify-content: center;
overflow: hidden;
}
.box-wrapper {
height: 95vh;
width: 100%;
display: flex;
flex-direction: column;
text-align: center;
}
#box1 {
padding: 10px;
border: solid 1px green
}
#box2 {
padding: 8px;
border: solid 1px blue
}
#box3 {
padding: 10px;
flex-grow: 1;
display: flex;
flex-direction: row;
border: solid 1px green
}
#box4 {
flex-grow: 2;
border: solid 1px orange
}
.middle-column {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.middle-column div {
flex-grow: 1;
margin: 0 8px;
border: solid 1px red;
}
.middle-column div+div {
margin-top: 8px
}
#box8 {
flex-grow: 1;
border: solid 1px black
}
</style>
</head>
<body>
<div class="box-wrapper">
<div id="box1">
Box 1
</div>
<div id="box2">
Box 2
</div>
<div id="box3">
<div id="box4">
Box 4
</div>
<div class="middle-column">
<div id="box5">
Box 5
</div>
<div id="box6">
Box 6
</div>
<div id="box7">
Box 7
</div>
</div>
<div id="box8">
Box 8
</div>
</div>
</div>
</body>
</html>
|
Output:
Example 2: This example illustrates how to create 3 boxes in the same div with regular HTML and CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
.container {
display: flex;
border: 2px solid black;
}
.box {
flex: 1;
margin: 15px;
padding: 40px;
border: 2px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>
|
Output:
Supported Browsers
- Google Chrome 1
- Microsoft Edge 12
- Firefox 1
- Opera 15
- Safari 1
HTML is the foundation of web pages and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
CSS is the foundation of web pages and is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...