asp-net MVC2: <div> tag - "float: left;" - Problem?

Problem with <div> tags

Works fine: Text "Whatever" is in column 1, followd by a radiobutton:

Works also fine (no radio button with text):

The next cell AFTER the text "Whatever" should be displayed in column 1 of the next row - instead directly under the text.

Background:

The table structure is made by my html helper. He generates asp.net MVC2 code to display radio buttons with images(!) in a table structure.

The html helper takes some values like: Generate a table with five radio buttons in two columns and add one radio button with the text "Whatever". (Of course takes the html helper some additional values, but thats not the problem ...)

The table is made with <div> tags (no <table> tag at all!). I use the styles "width: 50%;" for a table with two columns and the "float: left;".

Everything works great - until the radio button with the text (and without any image) should be displayed in the last column. See for example picture 2: The after the "text radio button" following radio button (with 3 images) should be displayed in the first column and NOT under the text.

What do I wrong?

Additional info: Same behaviour in IE and firefox.

Thanks in advance!

---

Thanks for the fast reply! As requested:

<div id="stars" style="width: 860px; border: solid 2px #000000; background-color:#CCCCCC;" >
    <div id="div0" style="width: 50.0%; float: left;" >
        <input name="radioButtonName" id="idPrefix0" type="radio" text="6" value="false" />
        <label for="idPrefix0">
            <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="6" >
            <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="6" >
            <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="6" >
            <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="6" >
            <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="6" >
            <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="6" >
        </label>
    </div>
    <div id="div1" style="width: 50.0%; flo开发者_JAVA百科at: left;" >
        <input name="radioButtonName" id="idPrefix1" type="radio" text="2" value="false" />
        <label for="idPrefix1">
            <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="2" >
            <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="2" >
        </label>
    </div>
    <div id="div2" style="width: 50.0%; float: left;" >
        <input name="radioButtonName" id="idPrefix2" type="radio" text="5" value="false" />
        <label for="idPrefix2">
            <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="5" >
            <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="5" >
            <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="5" >
            <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="5" >
            <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="5" >
        </label>
    </div>
    <div id="div3" style="width: 50.0%; float: left;" >
        <input name="radioButtonName" id="idPrefix3" type="radio" text="1" value="false" />
        <label for="idPrefix3">
            <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="1" >
        </label>
    </div>
    <div id="div4" style="width: 50.0%; float: left;" >
        <input name="radioButtonName" id="idPrefix4" type="radio" text="4" value="false" />
        <label for="idPrefix4">
            <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="4" >
            <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="4" >
            <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="4" >
            <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="4" >
        </label>
    </div>
    <div id="div5" style="width: 50.0%; float: left;" >
        <input name="radioButtonName" id="idPrefix5" type="radio" text="-1" value="false" />
        <label for="idPrefix5">
            Whatever
        </label>
    </div>
    <div id="div6" style="width: 50.0%; float: left;" >
        <input name="radioButtonName" id="idPrefix6" type="radio" text="3" value="false" />
        <label for="idPrefix6">
            <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="3" >
            <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="3" >
            <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="3" >
        </label>
    </div>
    <div id="div7" style="width: 50.0%; float: left;" >
        &nbsp
    </div>
</div>

---

Getting strange (at 1st look):

But explainable: Think about a chain: Pull the cell / radio button with the 5 images "two positions/columns to the right" (where it should be) and imagine that all following cells/radio buttons would follow. Then everything would be at the right place. ;-)

---

Yes, its stupid to answer the own question ... but I want to share what i found out ;-)

There was a "wrapping" div - tag missing that says "take the following nested div tags and build ONE COMPLETE row!"

  <div style="width:100%;">

The changed code:

<div id="stars" style="width: 860px; border: solid 2px #000000; background-color:#CCCCCC;" >


    <div style="width:100%;">


        <div id="div0" style="width: 33.333333333333333333333333333%; float: left;" >
            <input name="radioButtonName" id="idPrefix0" type="radio" text="6" value="false" />
            <label for="idPrefix0">
                <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="6" />
                <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="6" />
                <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="6" />
                <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="6" />
                <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="6" />
                <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="6" />
            </label>
        </div>
        <div id="div1" style="width: 33.333333333333333333333333333%; float: left;" >
            <input name="radioButtonName" id="idPrefix1" type="radio" text="3" value="false" />
            <label for="idPrefix1">
                <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="3" />
                <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="3" />
                <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="3" />
            </label>
        </div>
        <div id="div2" style="width: 33.333333333333333333333333333%; float: left;" >
            <input name="radioButtonName" id="idPrefix2" type="radio" text="-1" value="false" />
            <label for="idPrefix2">
            Whatever
            </label>
        </div>


    </div>
    <div style="width:100%;">


        <div id="div3" style="width: 33.333333333333333333333333333%; float: left;" >
            <input name="radioButtonName" id="idPrefix3" type="radio" text="5" value="false" />
            <label for="idPrefix3">
                <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="5" />
                <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="5" />
                <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="5" />
                <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="5" />
                <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="5" />
            </label>
        </div>
        <div id="div4" style="width: 33.333333333333333333333333333%; float: left;" >
            <input name="radioButtonName" id="idPrefix4" type="radio" text="2" value="false" />
            <label for="idPrefix4">
                <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="2" />
                <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="2" />
            </label>
        </div>
        <div id="div5" style="width: 33.333333333333333333333333333%; float: left;" >
            &nbsp
        </div>


    </div>
    <div style="width:100%;">


        <div id="div6" style="width: 33.333333333333333333333333333%; float: left;" >
            <input name="radioButtonName" id="idPrefix6" type="radio" text="4" value="false" />
            <label for="idPrefix6">
                <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="4" />
                <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="4" />
                <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="4" />
                <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="4" />
            </label>
        </div>
        <div id="div7" style="width: 33.333333333333333333333333333%; float: left;" >
            <input name="radioButtonName" id="idPrefix7" type="radio" text="1" value="false" />
            <label for="idPrefix7">
                <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="1" />
            </label>
        </div>
        <div id="div8" style="width: 33.333333333333333333333333333%; float: left;" >
            &nbsp
        </div>


    </div>


</div>