How to create three boxes in the same div using HTML and CSS ?

Last Updated : 29 May, 2020

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.

<!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>
        body,
        html {
            height: 100%;
            width: 100%;
            overflow: hidden;
        }
  
        .box-wrapper {
            height: 100vh;
            width: 100vw;
            display: flex;
            flex-direction: column;
        }
  
        #box1 {
            padding: 10px;
            height: 30px;
            line-height: 30px;
            border: solid 1px green
        }
  
        #box2 {
            height: 15px;
            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">
            GeeksforGeeks 1
        </div>
  
        <div id="box2">
            GeeksforGeeks 2
        </div>
  
        <div id="box3">
            <div id="box4">
                GeeksforGeeks 4
            </div>
            <div class="middle-column">
                <div id="box5">
                    GeeksforGeeks 5
                </div>
                <div id="box6">
                    GeeksforGeeks 6
                </div>
                <div id="box7">
                    GeeksforGeeks 7
                </div>
            </div>
            <div id="box8">
                GeeksforGeeks 8
            </div>
        </div>
    </div>
</body>
  
</html>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.

My Personal Notes

Related Articles

How to create three boxes in the same div using HTML and CSS ?