Struggling to figure out how to achieve a simple alignment:
I want a line with 2 side by side divs, the first one taking up its necessary space and the second occupying the remaining space (this part is easy with inline-block or float)
The right div should have two overlaying child divs, both taking up 100% of the parent div on the right (this is where I'm stuck).
I am trying to create a progress bar with a label on the left and a percentage label on top of the progress bar. The text in the progress label needs to be centered (hence the need for it to take up 100% of the parent div)
If anyone has any suggestions, please share!
Here's an illustration of my issue:
<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%;
}
Check out this jsFiddle link for a visual representation: http://jsfiddle.net/a9cnH/3/
The issue at hand: struggling to position 2 divs inside the "right" div, each one taking up 100% of the right div. If I use absolute positioning on them, then I have to change the position of the "right" div from "static", which throws off the alignment next to the left div.