CODEWITHSUNDEEP
html
Vincent Chua
Vincent Chua

Reputation: 1007

Using percent on width

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.

Upvotes: 0

Views: 44

Answers (3)

Sergey P. aka azure
Sergey P. aka azure

Reputation: 4762

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.

Upvotes: 1

Kavitha K Gowd
Kavitha K Gowd

Reputation: 527

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.

Upvotes: 1

DannyThunder
DannyThunder

Reputation: 1004

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

Works for me

One float left, the other one float right.

Upvotes: 1

Related Questions