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:

My Personal Notes

Related Articles