How do I set it to allocate the left div as much as the remaining size of the screen?

Question

I have a question about div in html. I have one screen and I have set the right_div and center_div to a fixed size from the right. How do I set it to allocate the left div as much as the remaining size of the screen?


.right_div{
    width: 90px;
    height: auto;
    float:right;
}
.center_div{
    width: 500px;
    height: 100%;
    float:right;
    right:90px;
}
.left_div{
here
}

score 1 · Answer 1 · answered Jan 11 '21 at 07:48

1

Just set the parent div of all these 3 div

.parent_div {
    display: flex;
}

and then for the left_div

.left_div {
    flex-grow: 1;
}

and remove the float property from other div i.e updated code is like this

.parent_div {
    display: flex;
}

.right_div{
    width: 90px;
    height: auto;
}

.center_div{
    width: 500px;
    height: 100%;
}

.left_div {
    flex-grow: 1;
}

answered Jan 11 '21 at 07:48

mss

1,423
2
9
18

If you are a parent div, do you mean the body? – psj Jan 12 '21 at 00:10
@박성준 basically whatever tag that contains the .left_div, center_div and right_div, if it is the body tag, then yes – mss Jan 12 '21 at 00:13

score 1 · Answer 2 · answered Jan 11 '21 at 08:03

A solution with JavaScript.

You can replace the setInterval with calling function only once if you want to do once at star only.

function adjustWidth(){
    let right_div_width = document.getElementById('right_div').offsetWidth;
    let center_div_width = document.getElementById('center_div').offsetWidth;
    let container_div_width = document.getElementById('container').offsetWidth;
    document.getElementById('left_div').style.width = (container_div_width - (center_div_width + right_div_width) ) + "px";
}

setInterval(function() {
    adjustWidth();
}, 1000);

#right_div{
    background-color: rgba(0, 0, 255, 0.4);
    float: right;
    width: 150px;
    height: 80px;
    float:right;
}
#center_div{
    float: right;
    background-color: rgba(0, 0, 255, 0.4);
    width: 100px;
    height: 80px;
    float:right;
    right:90px;
}
#left_div{
    background-color: rgba(0, 0, 255, 0.4);
    height: 80px;
    float: left;
}
#container{
    height: 80px;
    background-color: rgba(0, 0, 255, 0.5);
}

<div id="container">
    <div id="left_div">Left Div</div>
    <div id="center_div">Center Div</div>
    <div id="right_div">Right Div</div>
</div>

score 0 · Accepted Answer · answered Jan 11 '21 at 08:08

0

With CSS you could use the Calc() function, like this:

.right_div{
    width: 90px;
    height: auto;
    float:right;
}
.center_div{
    width: 500px;
    height: 100%;
    float:right;
    right:90px;
}
.left_div{
 width: Calc(100% - 500px - 90px - 90px);
}

answered Jan 11 '21 at 08:08

Thomas W

32
5

This will be static thus not responsive – Jaysmito Mukherjee Jan 11 '21 at 08:42
It will be repsonsive because of the percentage. That changes when you resize the window – Thomas W Jan 11 '21 at 15:39
1

Thank you. This is exactly the code you want. – psj Jan 12 '21 at 00:11

How do I set it to allocate the left div as much as the remaining size of the screen?

3 Answers3