CSS set width of first element based on width of second element - css

Question

I'm not sure exactly how to work what I'm trying to accomplish so bear with me...
I'm trying to set the width of an element, based on the width of a proceeding element. visually it would look like this:
container element
--------------------------------------------
| | |
| | |
|<--auto width for div1-->|<--div2 200px-->|
| | |
| | |
--------------------------------------------
So, essentially, div2 is set to float on the right of the page, and div1 should span up to the right edge of div2 automatically
I've started a fiddle at: http://jsfiddle.net/yUvJs/
Any help would be greatly appreciated... thanks in advance...

Answer 1

Just use tables. Get rid of the float, set the two box divs to display:table-cell and the container div to display:table. The first box should then adjust its width automatically based on the width of the second box.
Fiddle example

Answer 2

You can use the calc() function which is new in CSS 3, to allow the first <div> span 100% width of its containing block minus the 200px of the second <div> - just remember to account for the 2px of border on each child element:
#box1 {
display:inline-block;
border:1px dashed blue;
height:100%;
opacity:.8;
background:#ccc;
width: -webkit-calc(100% - 204px);
width: -moz-calc(100% - 204px);
width: calc(100% - 204px); /* 2px + 2px dotted border */
}
Example

Answer 3

I suggest implementing this in JavaScript. You would do something like this in JavaScript:
var cont = document.getElementById("container");
var box2 = document.getElementById("box2");
var box1Width = cont.offsetWidth - box2.offsetWidth;
document.getElementById("box1").style.width = box1Width + "px" ;
I implemented this on your fiddle with a couple minor changes to demonstrate that it works. Check it out: http://jsfiddle.net/yUvJs/26/

Answer 4

I'm not sure of all your requirements, but if you can reverse the html order:
<div id='container'>
<div class='box' id='box2'></div>
<div class='box' id='box1'></div>
</div>
And remove the display: inline-block (which should not be needed when floating), but apply a overflow: hidden (and its magic) to the box1 then you get what you want as seen in this fiddle.

Answer 5

I know this question is old, but for the above case, can use flex:
HTML:
<div id='container'>
<!-- If you want to give id/class is up to you, css selectors can do it pretty well too for generalization purposes -->
<div>...data...</div>
<div>...data...</div>
</div>
CSS:
#container{
display:flex; flex-direction:row;
width:700px; border:1px solid black; height:300px;
}
#container > div:nth-child(1){
flex:auto;
border:1px dashed blue; height:100%; opacity:.8; background:#ccc;
}
#container > div:nth-child(2){
flex:initial;
border:1px dashed red; width:200px; height:100%; opacity:.8; background:#eee;
}
Try it, and see how display flex solves your problem much more elegant