使用宽度百分比

Question

I'm trying to float two divs within an outer div, but my problem is that when using percent for width, the space isn't fully occupied

You can check the html here: http://codepen.io/vincentccw/pen/DBEot

<div class="outer">
    <div class="d1">a</div>
    <div class="d2">b</div>
</div>

.outer{
  background:red;
  width:1024px;
  margin:0 auto;
  height:400px;
}

.d1{
  background:green;
  width:20%;
  float:left;
}

.d2{background:blue;
    width:80%;
    float:left;
}

Notice the 'd2' class isnt fully occupied( you can still see the red colour on right), unless I changed convert the percent back to pixel value.

Answer 1

.d2{
  background:blue;
    width:80%;
    float:right;
}

Works for me

One float left, the other one float right.

Answer 2

Check this http://codepen.io/anon/pen/qyDEe . As you are trying to float both the div's to left you are not able occupy full width.

Answer 3

It's strange and looks like some bug in browser renderer. Browser reports that d1 has width 205px and d2 - 819px and the sum of them is precisely 1024px. But 20% of 1024px is 204.8px and 80% of 1024px is 819.2px (not precise value). If you set width of parent div to 1000px then you got precise fit of the inner divs.