9

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.

mskfisher
  • 3,291
  • 4
  • 35
  • 48
Matt Norris
  • 8,596
  • 14
  • 59
  • 90

4 Answers4

15

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/

Ciaran Archer
  • 12,316
  • 9
  • 38
  • 55
2

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

Preview:

alt text

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>
Jeaf Gilbert
  • 11,495
  • 19
  • 78
  • 105
0

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

KhanS
  • 1,167
  • 2
  • 12
  • 27
0
<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>
Ralf de Kleine
  • 11,464
  • 5
  • 45
  • 87
  • Both sections should be floated left for them to "stack up" from the left.. *afaik* – Kyle Sep 23 '10 at 12:21