Question

I have 2 block-inline divs.

I don’t wan’t to specify the width of the first one but, I would like the second takes 100% of the remaining space. The container of the two divs take 100% of my screen.

It seems to be possible using jQuery to determine the width of the first div and to set the second value, but I would like to do it in pure css.

How can I do that ?

Answer 1

div.box {
  background: #EEE;
  height: 100px;
  width: 600px;
}

div.div1 {
  background: #999;
  float: left;
  height: 100%;
  width: auto;
}

div.div2 {
  background: #666;
  height: 100%;
}

div.clear {
  clear: both;
  height: 1px;
  overflow: hidden;
  font-size: 0pt;
  margin-top: -1px;
}

<div class="box">
   <div class="div1">1st</div>
   <div class="div2">2nd</div>
   <div class="clear">
</div>

Hope it helped.