How do I display 2 sections side-by-side?

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

Have section1 and section2 in separate div's and try float: left on section1 div and float: right on section2 div.

Answer 2

<style>
    section.left{float:left;}
</style>
<section class="indent-1">
    <!-- Section 1 --> 
    <section class="left">
        <div>Some content</div>
        <div>Some more</div>
    </section>

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

Answer 3

Float them both left with a set width on each section and you'll be OK, like so:

<style>
    .indent-1 {float: left;}
    .indent-1 section {width: 50%; float: left;}
</style>

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

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

No need to change your markup this way.

Also here for further info on the CSS box model: http://css-tricks.com/the-css-box-model/

Answer 4

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>