Creating 2 overlayed divs under 2 side by side divs

Question

I can't seem to find how to create this simple alignment:

Have a line with 2 side by side divs, the first taking up the space it requires and the latter the remaining space (this one is simple enough with inline-block or float)

The right div should contain two overlayed child divs each taking 100% of the right parent (this I couldn't do).

My motivation is a progress bar with a label (on the left) and a percent label over the progress bar. The progress label text should be centered (this is why I need it to take 100% of the right parent)

If anyone has any idea, I'd love to hear them.

Here is an illustration of my problem:

<div id="all">
    <div id="left">
        left
    </div>
    <div id="right">
        right
    </div>
</div>

#all {
    width: 200px;
    height: 100px;
    background: grey;
    border: 1px solid;
}

#left {
    background: red;
    float: left;
    height: 100%
}

#right {
    background: blue;
    display: block;
    height: 100%;
}

Here is a jsFiddle illustration of it: http://jsfiddle.net/a9cnH/3/

My problem: I want to position 2 divs inside the "right" div. Each should take 100% of the right div. If I use absolute on them than I must make my "right" div position other than "static", but this make it not align next to the left div side by side.

Have you tried searching for [CSS progress bar](http://www.google.ca/search?q=css+progress+bar&ie=utf-8&oe=utf-8&channel=suggest) to see how others have handled this? Also worth noting, there is a `progress` element: https://developer.mozilla.org/en-US/docs/HTML/Element/progress — cimmanon, Mar 08 '13 at 19:54
The Mozilla progress bar is supported from IE10. I am using jquery UI progress bar and they do supply an example of a label on top of the progress bar, but they do give percentages there to make the label text centered. The problem there is that when the text is too long (i.e "completed") the centering is off. I thought I'd use the text-align: center to get the desired effect and make the label take 100%. — Marumba, Mar 09 '13 at 15:26

score 0 · Answer 1 · answered Mar 08 '13 at 19:53

If you want to stack divs on top of on another, you need to use the z-index and align divs absolutely. Example:

   <div style="border: 1px sold red; width: 300px; height:200px; background-color:White;position:relative;">
        <div style="width:50%; height:100%; background-color:Red; z-index:2;  float:left; "></div>
        <div style="width:50%; height:100%; background-color:blue;z-index:2; float:right; "></div>
        <div style="width:50%; height:50%; background-color:green;z-index:3; top:25%; left:25%; position:absolute; "></div>   
   </div>

score 0 · Answer 2 · answered Mar 09 '13 at 16:21

I finally got it.

I needed both left and right divs to have overflow hidden. Than I could put the right div position relative.

<div id="all">
    <div id="left">
        left
    </div>
    <div id="right">
        <div id="right1">
            r1
        </div>
        <div id="right2">
            r2
        </div>
    </div>
</div>

#all {
    width: 200px;
    height: 100px;
    background: grey;
    border: 1px solid;
}

#left {
    background: red;
    height: 100%;
    float: left;
    overflow: hidden;
}

#right {
    background: blue;
    height: 100%;
    overflow: hidden;
    position: relative;
}

#right1 {
    width: 100%;
    background: green;
    position: absolute;
}

#right2 {
    width: 100%;
    position: absolute;
    text-align: center;
}

Here how it looks: http://jsfiddle.net/nSD66/

Creating 2 overlayed divs under 2 side by side divs

2 Answers2