Correct display of border in HTML

Problem: There is a DIV element which has a CSS class “controls-ct” defined.

<div class="controls-ct">
    <div class="controls">
        <div>
            <div wicket:id="goodsCategory"/>

            <div wicket:id="goodsDetail"/>

            <div wicket:id="goodsName"/>

            <div wicket:id="goodsProducerName"/>

            <div wicket:id="goodsModel"/>

            <div wicket:id="goodsSerialNumber"/>
        </div>
        <div>
            <div wicket:id="goodsPrice"/>

            <div wicket:id="goodsInsuranceProgram"/>

            <div wicket:id="goodsInsurancePremiumSum"/>

            <div>
                <!-- List of all insurance premiums -->
                <div wicket:id="insurancePremiumsListPanel" />

                <!-- List of all insurance risks -->
                <div wicket:id="insuranceRisksListPanel" />
            </div>
        </div>

    </div>
    <!-- ADD BR TAG TO FORCE THE CORRECT DISPLAY OF BORDER -->
    <br clear="all"/>
</div>

Without usage of BR tag the display was as follows:

And after the BR tag was added: