Overflow doesn't work properly with pure CSS cubes

Question

I have been trying to make a background with pure CSS (Using CSS triangles with the help of border property) and I was successful so far. But there's an overflow issue that's destroying whole thing.

as shown in above image; I want 3rd cube exactly on the right side of 2nd cube (half hidden).

CSS:

.cube {
        float: left;
        height:239px;
        width:200px;
    }

        .cube .top {
        }

         .cube .top .high{
                width: 0;
                height: 0;
                border-bottom: 60px solid #46B535;
                border-left: 100px solid transparent;
                border-right: 100px solid transparent;
            }
            .cube .top .low {
                width: 0;
                height: 0;
                border-top: 60px solid #46B535;
                border-left: 100px solid transparent;
                border-right: 100px solid transparent;
            }

        .cube .left {
            float: left;
            position: relative;
            top: -60.7px;
        }

            .cube .left .high {
                width: 0;
                height: 0;
                border-bottom: 60px solid #59BE32;
                border-right: 100px solid transparent;
            }

            .cube .left .mid {
                height: 60px;
                width: 100px;
                background: #59BE32;
            }

            .cube .left .low {
                width: 0;
                height: 0;
                border-top: 60px solid #59BE32;
                border-left: 100px solid transparent;
            }

        .cube .right {
            float: left;
            position: relative;
            top: -60.7px;
        }


            .cube .right .light .up {
                width: 0;
                height: 0;
                border-bottom: 60px solid #27B138;
                border-left: 100px solid transparent;
            }

            .cube .right .light .down {
                width: 0;
                height: 0;
                border-top: 60px solid #27B138;
                border-left: 100px solid transparent;
            }

            .cube .right .dark {
                position: relative;
                top: -61px;
            }

                .cube .right .dark .up {
                    width: 0;
                    height: 0;
                    border-bottom: 60px solid #00AA3A;
                    border-right: 100px solid transparent;
                }

                .cube .right .dark .down {
                    width: 0;
                    height: 0;
                    border-top: 60px solid #00AA3A;
                    border-right: 100px solid transparent;
                }

    .clear {
        clear: both;
    }

    .even {
        clear: both;
        overflow:hidden;
        height:36%;
    }

HTML:

      <section class="even">
        <section class="cube">

            <div class="top">
                <div class="high"></div>
                <div class="low"></div>
            </div>
            <div class="left">
                <div class="high"></div>
                <div class="mid"></div>
                <div class="low"></div>
            </div>
            <div class="right">
                <div class="light">
                    <div class="up"></div>
                    <div class="down"></div>
                </div>
                <div class="dark">
                    <div class="up"></div>
                    <div class="down"></div>

                </div>
            </div>
        </section>
        <section class="cube">

            <div class="top">
                <div class="high"></div>
                <div class="low"></div>
            </div>
            <div class="left">
                <div class="high"></div>
                <div class="mid"></div>
                <div class="low"></div>
            </div>
            <div class="right">
                <div class="light">
                    <div class="up"></div>
                    <div class="down"></div>
                </div>
                <div class="dark">
                    <div class="up"></div>
                    <div class="down"></div>

                </div>
            </div>
        </section>
        <section class="cube">

            <div class="top">
                <div class="high"></div>
                <div class="low"></div>
            </div>
            <div class="left">
                <div class="high"></div>
                <div class="mid"></div>
                <div class="low"></div>
            </div>
            <div class="right">
                <div class="light">
                    <div class="up"></div>
                    <div class="down"></div>
                </div>
                <div class="dark">
                    <div class="up"></div>
                    <div class="down"></div>

                </div>
            </div>
        </section>

    </section>

JSFiddle:

http://jsfiddle.net/dGLMk/

Answer 1

Eliminate the Float

Using display: inline-block instead of float with a white-space: nowrap on the wrapping element along with some number tweaking gives you a solid line that does not move and allows for an overflow of the elements. Here is an example fiddle that may still need some slight adjustment on the top and left numbers, but gets close.

Answer 2

If you add a container div with overflow:hidden and the width you need, AND re-use the section even with width enought for the 3 cubes it should work.

Check here

.even {
    width:700px;
}
.container {
    overflow:hidden;
    width:500px;
}

(and div .container is around the code you posted)

• maybe a min-width could be also an option.