Html/css: Can Percentage Width Divs Always Completely Fill Their Parent Container (like A Table Cell Does)?

I would like to know if it is possible to have divs of various percentages fill their parent container completely like how table cells will always fill the width of their row even

Solution 1:

In your div example, adding a few more "3"s to the end of your percentage helped a little bit.

Another CSS method would be with CSS3 flex-box declarations. JSFiddle webkit-only example here. Unfortunately, browser support isn't good (no IE), but it's a beautifully clean way to achieve what you need.

Edit: A good post by John Resig discusses this problem and the difficulty in making it perfect, although it doesn't offer any additional guidance.

Solution 2:

The problem is that, since your parent container uses percent, which boils down to the finest level of sub-pixel precision offered by CSS, adding child elements whose widths are a percentage of the parent's already fully-precise width, the floating point numbers needed to express their actual width in pixels requires more precision than CSS can afford. Apparently, when faced with a value too precise for its rendering engine, browsers will, by default, round down, leaving tiny margins of unfilled space when an element's exact width can't be expressed with perfect precision.

A sort of kludgy workaround for this quirk is to assign your .right div a padding-left: .25% and margin-right: -.25%. This will supplement the apparent width of the div without bumping it to the next line.

Hope this helps!

Solution 3:

The biggest problem is the ENTER/space between the divs, at least one space is rendered. This makes that you have 3 items of 33.33333% + 3 spaces of width. This doesn't fit in the parent. of you put the begin and end div right next to each other, The do fit.

I have played a bit with your example and now it looks like this:

div.container
{
    width: 90%;
    margin: 10px auto;
    height: 100px;
    border: 1px solid #999;
}

div.container>div{
    display:inline-block;
    margin:0;
    padding:0;
    width: 33.333%;
    height: 100%;
}
div.left
{
    background-color: Red;
}

div.center
{
    background-color: Blue;
}

div.right
{
    background-color: Aqua;
}​



<divclass="container"><divclass="left"></div><divclass="center"></div><divclass="right"></div></div>​