How to pile center divs in 3 float:left divs

Question

The following 3 side-by-side divs are working, but i need to add more divs below the one in the center, respecting the width of the middle section. But all 3 are floated left, so i can't figure it out.

<div>
        <div class="left" style="width:20%">LEFT</div>
        <div class="left" style="width:60%">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div class="left" style="width:20%">RIGHT</div>
        <div style="clear: left;" />
    </div>

Also:

 .left {
        float: left;
        word-break: break-all;
    }

Answer 1

If I understand your question correctly, this may be what you're looking for. I basically created another row of divs and then set the visibility of the left div to hidden. Here's the JSFiddle

<div>
    <div class="left" style="width:20%">LEFT</div>
    <div class="left" style="width:60%">middle
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    <div class="left" style="width:20%">RIGHT</div>
    <div style="clear: left;" />

<br />
<div class="left" style = "width:20%; visibility:hidden">LEFT</div>
<div class = "left" style="width:60%">middle
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    <div class="left" style="width:20%"></div>
</div>