I want to design 3 colored divs with specific dimensions and placements.
The left div should have a fixed width and take up 100% of the height.
The right div should fill up the remaining space (100% height and width minus the left div).
The last div should be contained within the right div.
Here is the progress I've made so far:
Here is the CSS code:
.left {
width:200px;
height:100%;
top:0;
position: absolute;
background: black;
float:left;
}
.right{
margin-left:210px;
background: green;
position: relative;
height: 100%;
}
.box {
width: 50%;
height: 200px;
position: relative;
margin-right: auto;
margin-left: auto;
background: black;
}
And here is the HTML code:
<div class="left"></div>
<div class="right">
<div class="box"></div>
</div>
The issue I'm facing is that the div with the class "right" is taking the size of the box inside it, instead of occupying 100% of the window. How can I correct this?
Another concern I have is why I am unable to set the height of the div with the class "box" to 100%. Whenever I try to do that, both the right div and box div disappear. Any insights on how to resolve this?