CSS - Two Divs fixed and fill BUT absolute position

Question

My question is much like this one:

Two divs, one fixed width, the other, the rest

but with some caveats that make the answer a bit different.

Without using javascript, is there a way to have two contained divs, one floating right at a locked width, the other stuck to the bottom of the container at a set height and taking the rest of the available width? The hard part here is everything above and around the two divs must remain clickable and associated with the parent div.

Here is the fiddle: http://jsfiddle.net/W7Ljd/

Here is the code:

.box {
    position: relative;
    width: 200px;
    height: 200px;
    padding: 5px;
    background:lightcoral;
}

.left {
    position: absolute; /* ------ Get Rid of these lines */
    bottom: 5px;        /* ------ */
    width: 80px;        /* ------ */
    overflow:hidden;
    height: 20px;
    background: lightyellow; /* Take up rest of space */
 }

 .right {
    float: right;
    width: 100px;
    height: 100%;
    background: lightblue;
}

The red area needs to be the accessible parent div, the yellow needs to be at the bottom taking up the rest of the width should the window be resized.

Thanks for the consideration, folks.

Where are you trying to have content? Only inside `.left` and `.right`? Or also inside the container `.box` div? — frozenkoi, Mar 14 '13 at 00:10
Is there a reason why you don't want `.left` set to `position: absolute` ? — John, Mar 14 '13 at 00:15

score 1 · Accepted Answer · answered Mar 14 '13 at 00:28

I made some slight changes to your fiddle.

By removing the width, and instead setting a left and right position, the div will automatically fill the space between those two points. Because your right div is a fixed width, you can set the right position on the left div to that number plus any gap you want between the divs (and any gap you create on the left side).

position: absolute doesn't negate the relationship the element has with its parent.

score 0 · Answer 2 · answered Mar 14 '13 at 00:20

Did you try using display: table, display: table-cell and display: table-row? If you give the container a display value of table and then each left and right a value of table-cell you can then split the container into two columns.

Then add vertical-align: bottom to the left one to move the content to the bottom. You'd have to add another element to get the different background color I think.

See this updated fiddle.

Since you don't mention in your question where do you need to fill content in, I'm not sure if this fits exactly your needs.

CSS - Two Divs fixed and fill BUT absolute position

2 Answers2