New section appears under another section set to float

Question

I have run into a problem. On my current project, I have two sections next to each other, both set to cover 50% of the width of the page, using the float: left and float: right. However, when I try to add yet another section to continue on with the page, I am struck with it not appearing properly, and Firefox's inspect element shows most of it behind the two previous sections.

HTML:

<section id="first-half">
    <div class="container">
        <a href="#" class="content-page">
            <div class="selectoption">
                <img src="image.png">
            </div>
        </a>
    </div> 
</section>
<section id="second-half">    
    <div class="container">
        <a href="#" class="content-two-page">
            <div class="optionselect-two">
                <img src="image_2.png">
            </div>
        </a>   
    </div>
</section>

CSS:

#first-half {
    width: 50%; 
    height: 100%;
    background-image: url('image.png'); 
    overflow: hidden; 
    float: left; 
}

#second-half {
    width: 50%; 
    height: 100%; 
    background-image: url('image.png'); 
    overflow: hidden; 
    float: right 
}

Thank you for any potentional replies.

Edit: To quote the very kind kukkuz in the comment section:

"the new element is below the previous two as you have not cleared float - you must always clear floating containers - see an example here"

Thanks to everyone for their help

If you want to add another section next to the others, modify the `width` property [JSFiddle](https://jsfiddle.net/ex92q51q/) — cpinamtz, Oct 16 '16 at 14:55
Thank you for your reply and reminding me to specify properly: the next section should have the width of 100%, that's where I stumbled upon this problem. — Martin, Oct 16 '16 at 14:59
So, if the third section has the `width` property to 100%, then it will be behind the others sections. [JSFiddle](https://jsfiddle.net/ejq9xL13/) — cpinamtz, Oct 16 '16 at 15:05
Sorry for the trouble of me trying to explain. The third section with the width of 100% needs to be below (scroll-wise) the two 50% sections. If I create the third section and set it to desired parameters, most of it appears under the two 50% ones, that has been said. — Martin, Oct 16 '16 at 15:13
Check is link:-http://learn.shayhowe.com/html-css/positioning-content/ — Razia sultana, Oct 16 '16 at 15:19
the new element is below the previous two as you have not `clear`ed float - you must always clear `float`ing containers - see [an example here](http://stackoverflow.com/questions/39844984/content-move-down-when-i-apply-float-property/39845092#39845092) — kukkuz, Oct 16 '16 at 15:41
That sure did the job, thank you very much, I can finally move forward. It was my first time using float, so I had no idea of its clearing. — Martin, Oct 16 '16 at 15:45

score 0 · Answer 1 · answered Oct 16 '16 at 14:58

div {height: 200px;}
#first-half  {width: 50%; height: 100%;background-image: url('image.png'); overflow: hidden; float: left; }
#second-half {width: 50%; height: 100%; background-image: url('image.png'); overflow: hidden; float: right }

<div>
  <section id="first-half">
    <div class="container">
        <a href="#" class="content-page">
        <div class="selectoption">
            <img src="image.png">
        </div>
        </a>
    </div> 
</section>
<section id="second-half">    
 <div class="container">
     <a href="#" class="content-two-page">
     <div class="optionselect-two">
            <img src="image_2.png">
     </div>
     </a>   
  </div>
</section>
</div>

For whatever reason, setting the suggested div height to auto caused the section to not appear whatsoever, setting the height to 200px obviously caused the sections to get cut off due to the overflow:hidden. Setting it to 100% moved the content from a previous section overflow to the "double-sections" and moved the content within the section I am trying to make visible down. — Martin, Oct 16 '16 at 15:09

PedroPombo · Answer 2 · 2016-10-16T15:25:26.050

Is that what you need ?

section {
  height: 100%;
  background-image: url('image.png');
  overflow: hidden;
  float: left;
}
#inline {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
  -webkit-justify-content: space-around;
  flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
}

<div id="inline">
  <section id="first-half">
    <div class="container">
      <a href="#" class="content-page">
        <div class="selectoption">
          <img src="image.png">
        </div>
      </a>
    </div>
  </section>
  <section id="second-half">
    <div class="container">
      <a href="#" class="content-two-page">
        <div class="optionselect-two">
          <img src="image_2.png">
        </div>
      </a>

  </section>
  <section id="second-half">
    <div class="container">
      <a href="#" class="content-two-page">
        <div class="optionselect-two">
          <img src="image_2.png">
        </div>
      </a>

  </section>

  </div>

New section appears under another section set to float

2 Answers2