CSS Percentage Widths Jiggling Around

Question

I'm having an issue with percent width elements in any browser. If you look at this jsfiddle and slowly resize the browser you'll see right hand side of the bottom row jiggles.

http://jsfiddle.net/drAWc/

HTML:

<div class='main'>
    <section class='full'>
        <div>1_1</div>
    </section>
    <section class='half'>
        <div>1_2</div>
    </section>
    <section class='half'>
        <div>1_2</div>
    </section>
    <section class='third'>
        <div>1_3</div>
    </section>
    <section class='third'>
        <div>1_3</div>
    </section>
    <section class='third'>
        <div>1_3</div>
    </section>
</div>

CSS:

.main {
    width: 400px;
    margin: 0 auto;
}
div {
    width: auto;
    background: blue;
    text-align: center;
}
.full {
    float: left;
    width: 100%;
}
.third {
    float: left;
    width: 33.3%;
}
.half {
    float: left;
    width: 50%;
}

I understand that three widths of 33.333% would add up to a total of 99.999% - but setting the .full element to 99.999% causes the half width ones to work (as that row's width totals 100%).

Is there a solution to this, or is it just the nature of things?

The only workaround I can think of would be something like.. setting every third .third div as width:33.334% which is a bit insane.

Answer 1

This fiddle http://jsfiddle.net/drAWc/2/

.main { width: 100%; margin: 0 auto; }
div { width: auto; background: blue; text-align: center; }

.full { float: left; width: 100%; }
.third { float: left; width: 33.33%; }
.half { float: left; width: 50%; }

will not jiggle.

I have set the width: 100%; for the main div

Answer 2

I would give one of the three div's a widht of 33.4%. The difference is so small that you won't see it, but it fixes the jiggle.

.third:first-child { width: 33.4%; }

But it somehow doesn't (check http://jsfiddle.net/drAWc/1/).

When the code is added as an inline-style to the first .third it works (check http://jsfiddle.net/drAWc/3/):

<section class='third' style='width: 33.4%;'><div>1_3</div></section>