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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

 

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.