Make DIV occupy page remnant with CSS

Question

Good guys, I have a div#x that varies your width amid 70px ~ 220px. I need a second div#y, who is next to you occupies the rest of the page space.

With jQuery it would be something like: $('#y).width() = 100% - $('#x).width();.

Does anyone know any way to do that CSS?

Answer 1

You can use display:table and display:table-cell to be able to manipulate the way you want.

Example:

.principal {
    width:100%;
    display:table;
}

.principal div{    
    display:table-cell;
    height:200px;
}

.principal div:first-child{background:red;width:200px;}
.principal div:last-child{background:green;}

<div class='principal'>
    <div></div>
    <div></div>
</div>

No Jsfiddle: http://jsfiddle.net/xyuv7ues/