How to draw responsive rectanges inside fixed size rectangle in HTML and CSS?

Question

I can draw such inner rectanges inside fixed size rectange but these are not responsive.

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test div dimension</title>
    <style>
        #main {
            width: 640px;
            height: 360px;
            border: 1px solid black;
        }

        #content {
            width: 100%;
        }

        #slide {
            border: 1px solid red;
            width: calc(640*0.75px);
            height: calc(360*0.75px);
            float: right;
        }

        #camera {
            border: 1px solid red;
            width: calc(640 * 0.25px);
            height: calc(360 * 0.25px);
            float: left;
        }
    </style>
</head>

<body>
    <div id="main">
        <div id="content">
            <div id="slide">
                Rectange 1
            </div>
            
            <div id="camera">
                Rectange 2
            </div>
        </div>
    </div>
</body>

</html>

How can I create such responsive inner rectanlges inside fixed size rectangle?

score 0 · Answer 1 · answered May 28 '22 at 15:09

height: 100%; is also required in #content

#content {
    width: 100%;
    height: 100%;
}

#slide {
    border: 1px solid red;
    width: 75%;
    height: 75%;
    float: right;
}

#camera {
    border: 1px solid red;
    width: 25%;
    height: 25%;
    float: left;
}

How to draw responsive rectanges inside fixed size rectangle in HTML and CSS?

1 Answers1