Question

I have this little problem:

How do I set the width on the second box in order to fill all the space, counting with the orange box?

Thanks

HTML:

 <div class="parent"><div class="orange"></div><div class="blue"></div></div>

CSS:

 .parent{width:100%;} .orange{width:100px;}

The orange and the blue box must be the same, even if they vary in sizes from page to page, pixel perfect if possible.

Answer 1

The simplest solution uses this markup:

<div class="complete">
  <div class="orange"></div>
  <div class="blue"></div>
</div>

You want .complete and .blue to be non-floating block elements, which will cause them to use up as much width as possible, but you also need .orange to float in order to be on the same line as .blue and prevent .blue from overlapping it by using a hidden overflow.

.complete { overflow : hidden }
.orange   { float : left ; width : 100px }
.blue     { overflow : hidden } 

If you need to leave a small space between orange and blue, add a right margin to the orange box.

Note that with this solution, the blue and orange boxes will have different heights. If you have graphical effects (such as backgrounds) that require boxes to have the same height, you will need more clever CSS.