CSS Div Dynamic Inner Width Height

Question

My clear expected output is like this: outer and inner div plan

Outer div has fixed width and height but inner needs to have dynamic 100% related to other inners. Tried many possibilities with position absolute, relative width, height auto and 100% but couldn't achieve the exact result. I'm sure that there is a simple and clean way to do it with CSS3.

Div side:

<div class="window">
    <div class="titlebar">
        <div class="title">Text</div>
    </div>
    <div class="scroll_right"></div>
    <div class="window_inner"></div>
    <div class="scroll_bottom"></div>
</div>

Style side:

    .window {
        width: 400px;
        height: 400px;
        background-color: yellow;
        position: relative;
    }

    .titlebar {
        position: absolute;
        top: 0;
        background-color: black;
        color: white;
        height: 20px;
        width: 100%;
    }

    .scroll_right {
        position: absolute;
        float: right;
        width: 20px;
        height: 100%;
        background-color: blue;
    }

    .window_inner {
        background-color: red;
        width: 100%;
        height: 100%;
        float: right;
        position: absolute;
    }

    .scroll_bottom {
        background-color: black;
        position: absolute;
        bottom: 0;
        height: 20px;
        width: 100%;
    }

Please add your code here.

Rajan Benipuri
– Rajan Benipuri

2017-10-28 11:25:30 +00:00
Commented Oct 28, 2017 at 11:25 — Rajan Benipuri
– Rajan Benipuri, Commented Oct 28, 2017 at 11:25
Welcome to the world of coding.

Mohammed Wahed Khan
– Mohammed Wahed Khan

2017-10-28 11:34:31 +00:00
Commented Oct 28, 2017 at 11:34 — Mohammed Wahed Khan
– Mohammed Wahed Khan, Commented Oct 28, 2017 at 11:34

Rajan Benipuri · Accepted Answer · 2017-10-28 12:22:47Z

0

There are many corrections required in your code for your desired result. I have tried adding few of them to give you an idea.

remove position:absolute; from your divs. Because you want them to position relative to other divs.
remove float:right; from your center div.

Go through the updated code.

    .window {
        width: 400px;
        height: 400px;
        background-color: yellow;
        position: relative;
    }

    .title{
       color: #ddd;
     }

    .titlebar {
        top: 0;
        background-color: black;
        color: white;
        height: 40px;
        width: 100%;
        display: flex;
        align-items: center;
    }

    .scroll_right {
        float: right;
        width: 20px;
        height: 100%;
        background-color: blue;
    }

    .window_inner {
        background-color: red;
        width: 100%;
        height: 100%;
    }

    .scroll_bottom {
        background-color: black;
        bottom: 0;
        height: 20px;
        width: 100%;
    }

<div class="window">
    <div class="titlebar">
        <div class="title">Vertically Centered Text</div>
    </div>
    <div class="scroll_right">
        <div class="scroll_top"></div>
        <div class="r_middle"></div>
        
    </div>
    <div class="window_inner"> </div>
    <div class="scroll_bottom">
        <div class="scroll_left"></div>
        <div class="b_middle"></div>
        <div class="scroll_right"></div>
    </div>
</div>

Edit : added display: flex; and align-items: center; to vertically align items in .titlebar

Hope this help.

edited Oct 28, 2017 at 12:22

answered Oct 28, 2017 at 11:57

Rajan Benipuri

1,8322 gold badges14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Hello Folks Over a year ago

Thank you very much. Doesn't pos absolute help us to put elements related with relative outer? Then what's the point of using pos absolute for anywhere?

Rajan Benipuri Over a year ago

position absolute means its not relative to the position of any other element of same hierarchy. Also, accept the answer if it helped.

Hello Folks Over a year ago

With your solution is there way to vertically center the title text? Because I was using pos relative and translateY for it before?

Hello Folks Over a year ago

And I think also translateY is not a good solution for centering a simple text

Rajan Benipuri Over a year ago

please check the updated solution for vertical center .titlebar

|

kyun · Accepted Answer · 2017-10-28 14:08:07Z

0

OuterDiv{
position :relativel
}
InnerDiv{
position :absolute
}

And you can read about flexible box that will help you.

To make the div more flexible

edited Oct 28, 2017 at 14:08

kyun

10.4k9 gold badges36 silver badges79 bronze badges

answered Oct 28, 2017 at 11:38

user8847777

2 Comments

Hello Folks Over a year ago

I think you mean flex grow but with floats I had problems. I'm adding sample code now.

Hello Folks Over a year ago

And with flex I think I would have browser support problem. But I would be happy if you can share your sample also.

marc_s · Accepted Answer · 2019-11-25 21:51:22Z

0

In scroll_bottom change the position from abs to rela

And when you use position properties prefer to use flexbox Than float that will be more efficient

edited Nov 25, 2019 at 21:51

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Oct 28, 2017 at 12:00

user8847777

Collectives™ on Stack Overflow

CSS Div Dynamic Inner Width Height

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related