Question

Here is the code.

<div style="overflow:hidden; width:800px;">
  <div style="float:left; width:500px;">
    first text
  </div>
  <div style="float:left; width:300px;">
    second text
  </div>
</div>

As you see I use width:300px; so that the second div takes the rest of right space. What is another option to make it taking the whole right space? Setting width:100%; doesn’t help as it jumps down.
The reason I ask is every time I have to count 800-500=300 (px). Once 500px changed to 550px, I have to change 300px to 250px. I believe there is a better way to set the width.
Thank you.

Answer 1

I guess this markup will play better http://jsbin.com/apubay/1/edit