CSS make div take up the rest of space

Question

I have this setup:

 <div class="parent">
   <div class="moverBoy"></div>
   <div class="smartBoy"></div>
 </div>

The parent is a for-ever-fixed element at say 100x20.

moverBoy and smartBoy always have 20 height and are inline-block and vertical-align: top so they are next to each other with no whitespaces or text anywhere.

moverBoy 's width changes either with JS or CSS animations. What I need to do is have smartBoy change his width to always take up the rest of the width so that the parent is always filled.

Answer 1

You can get exactly what you are looking for by floating .moverBoy and modifying the overflow of .smartBoy (Works all the way back to IE6 or so!):

 window.onload = function(){ document.getElementsByClassName('moverBoy')[0].style.width = '100px'; } 

 body{ margin:0 } .moverBoy{ float: left; background:#F00; width:300px; transition: width 2s; } .smartBoy{ overflow: hidden; background:#0F0; } 

 <div class="parent"> <div class="moverBoy">&nbsp;</div> <div class="smartBoy">&nbsp;</div> </div> 

Alternatively, you could have your snippet behave like a table:

 window.onload = function(){ document.getElementsByClassName('moverBoy')[0].style.width = '100px'; } 

 body{ margin: 0; } .parent{ display:table; width: 100%; } .moverBoy{ display: table-cell; background:#F00; width:300px; transition: width 2s; } .smartBoy{ display: table-cell; background:#0F0; } 

 <div class="parent"> <div class="moverBoy">&nbsp;</div> <div class="smartBoy">&nbsp;</div> </div> 

Either way, you can change the width of the parent element or .moverBoy and .smartBoy will adjust accordingly.

Answer 2

You could make use of CSS3 flex . In this snippet below, hover on any of the xBoys and their width will change to 75% and the other will fill the available space. Works only in modern browsers, though.

You have to just apply your width to the .moverBoy through flex-basis property. So, flex: 1 1 75% will change its width to 75% and adjusting .smartBoy accordingly. Other properties are auto grow and shrink with 1 being yes.

Snippet :

 .parent { width: 100px; height: 20px; border: 1px solid gray; display: flex; flex-direction: columns; } .parent > div { flex: 1 1 0%; transition: all 500ms; } .parent > div:hover { flex: 1 1 75%; } .moverBoy { background-color: #f00; } .smartBoy { background-color: #00f; } 

 <div class="parent"> <div class="moverBoy"></div> <div class="smartBoy"></div> </div> 

Answer 3

First of all, because mover and smart are on a separate line, they automatically have whitespace inbetween. You can get around this by making them the same line, or adding comments like so:

<div class="parent">
   <div class="moverBoy"></div><!--
   --><div class="smartBoy"></div>
</div>

For the css, you could simply use Calc:

.moverBoy {
    width:20px;
}
.smartBoy {
    width: calc(100% - 20px);
}

Here is a little example of it working: http://jsfiddle.net/083pnubk/