Issue with a section content

Question

I have a issue with a section in its content.

If you see everything i write in the section goes outside of it and the section appear to be empty!

HTML:

<section id="scopri">
<article id="scopridettagli">
    <div id="scoprisx">
        <ul class="scopriul">
            <li>
                <p class="scopri">problemone</p>
            </li>
            <br />
            <li>
                <p class="scopri">problemtwo</p>
            </li>
            <br />
            <li>
                <p class="scopri">problemthree</p>
            </li>
            <br />
            <li>
                <p class="scopri">problemfour</p>
            </li>
        </ul>
    </div>
    <div id="scopridx">
        <ul class="scopriul">
            <li>
                <p class="scopri">stillproblemfive</p>
            </li>
            <br />
            <li>

                <p class="scopri">problemsix</p>
            </li>
            <br />
            <li>
                <p class="scopri">problemseven</p>
            </li>
        </ul>
    </div>
</article>

CSS:

http://jsfiddle.net/giovapanasiti/yLtEy/3/

Thanks to everyone!

Answer 1

Add overflow: hidden; to #scopridettagli .. its height is collapsed due to its floated descendants

jsFiddle