How do I display 2 sections side-by-side? [duplicate]

Question

I have following HTML code:

<section class="indent-1">
    <!-- Section 1 --> 
    <section>
        <div>Some content</div>
        <div>Some more</div>
    </section>

    <!-- Section 2 -->
    <section>
        <div>Some content</div>
        <div>Some more</div>
    </section>
</section>

And I'd like to display Section 1 on the left and Section 2 on the right instead of vertically like they normally appear. The parent section surrounding them is indented 120px, and I'd like to preserve that.

How do I accomplish this? I tried float: left on Section 1 and display: inline on the parent section, but those seemed to cause Section 2 to "break out" of its parent section.

Answer 1

You have to add overflow:hidden; to the parent.

Preview:

CSS:

<style>
    section { border:1px solid red; padding:10px; overflow:hidden; }
    section > section { float:left; }
    .indent-1 { padding-left:120px; }
</style>

HTML:

<section class="indent-1">
    <!-- Section 1 --> 
    <section>
        <div>Some content</div>
        <div>Some more</div>
    </section>

    <!-- Section 2 -->
    <section>
        <div>Some content</div>
        <div>Some more</div>
    </section>
</section>