Float two DIVs by width in px and percentage

Question

How to float two DIVs side by side as the width of one is defined in pixel and the other should fill the available width in the parent DIV? The point is that the content of second DIV may be blank; thus, I cannot leave its width empty.

.div1 {
float:left;
display:block;
width:200px
}

.div2 {
float:left;
display:block;
width: [... 100% - 200px ...]
} 

Solution 1

Simple - float the first div and give only margin equal to first div width to second div (a div is a block element so it already has a 100% width - just for the sake of validation you can add width:auto):

.div1 {
  float: left;
  width: 200px;
  height: 100px;
  background: violet;
}

.div2 {
  width: auto;
  margin-left: 200px;    
  height: 100px;
  background: yellow;    
}

There's a fiddle here: http://jsfiddle.net/gFyY3/

Solution 2

If you don't have to use float, you can also use the inline-block display-type. Saves you from clearing the floats etc.

<div style="width: 250px; display: inline-block; vertical-align: top;">
Some content <br> More <br> More
</div>

<div style="display: inline-block;">
Some more content  <br> More <br> More   <br> More <br> More   <br> More <br> More 
</div>

There's a fiddle here: http://jsfiddle.net/Neograph734/tbqpy/