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:

Screenshot-2023-12-29-175208

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.