Comment afficher deux sections côte à côte?

Question

Je suit le code 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> 

Je voudrais afficher Section 1 sur la gauche et Section 2 à droite au lieu de la verticale comme ils apparaissent normalement. La section parente qui les entoure est en retrait 120px, et j'aimerais le conserver.

Comment accomplir ceci? J'ai essayé float: left sur section 1 et display: inline sur la section parente, mais ceux-ci semblaient provoquer Section 2 à "sortir" de sa section parente.

Answer 1

flotter à la fois à gauche avec une largeur de jeu sur chaque section et vous serez OK, comme ceci:

<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> 

Pas besoin de changer votre balisage de cette façon.

également ici pour plus d'infos sur le modèle de boîte CSS: http://css-tricks.com/the-css-box-model/

Answer 2

Avoir la section1 et la section2 dans des div séparés et essayer float: left sur div div section1 et float: right sur div division2.

Answer 3

<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 4

Vous devez ajouter overflow:hidden; au 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>