How to create three boxes in the same div using HTML and CSS ?
Three or more different div can be put side-by-side using CSS in the same div. This can be achieved with flexbox – but note that you will need to use wrapper divs and apply different flex-directions to each in order to make the grid layout work. Use CSS property to set the height and width of div.
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: 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:
Supported Browsers are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
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.
.png)
