CODEWITHSUNDEEP
css
Totty.js
Totty.js

Reputation: 15841

Simple qst about CSS, px and percentage width mix?! [with image]

I have this little problem:enter image description here

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.

Upvotes: 3

Views: 608

Answers (1)

Victor Nicollet
Victor Nicollet

Reputation: 24577

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.

Upvotes: 4

Related Questions