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

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/