Preventing the flow of content around a streamlined element

Question

I am well aware of the concept of overflow in HTML / CSS. But here I am stuck in a very simple problem.

    #wrapper {
      width: 100%;
    }
    aside {
      width: 30%;
      text-align: justify;
      float: left;
    }
    section {
      width: 70%;
      text-align: justify;
    }

<div id="wrapper">
  <aside>Aside</aside>
  <section>Section</section>
</div>

Run codeHide result

My div wrapper consists of sides and a section. I tried to align them side by side with the total width of the container. But it always seems to be an overflow section. I wonder why? The total width of the third-party section never crossed the width of the wrapper container. Only works if I put overflow:hiddenin a section.

Answer 1

All you need to overcome the overflow effect sectionis to install overflowin autothe section. Now you do not need to install floaton section, ...

#wrapper {
      width: 100%;
    }
    aside {
      width: 30%;
      text-align: justify;
      float: left;
      background: green;
    }
    section {
      width: 70%;
      text-align: justify;
      overflow:auto;
      background: red;
    }

<div id="wrapper">
  <aside>Aside</aside>
  <section>Section Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere illo pariatur odit! Nobis impedit quibusdam a explicabo quod in molestias amet nemo fugiat excepturi nisi placeat ex est sequi distinctio.</section>
</div>

Run codeHide result

, ( ) section , section section. . overflow:hidden, , , section, . overflow:hidden , . image section :

#wrapper {
    width: 100%;
}
aside {
    width: 30%;
    text-align: justify;
    float: left;
    background: green;
}
section {
    width: 70%;
    text-align: justify;
    background: yellow;
    overflow:hidden;
}
section img {
    width:100%;
    height: auto;
}

<div id="wrapper">
  <aside>Aside</aside>
  <section>Section Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere illo pariatur odit! Nobis impedit quibusdam a explicabo quod in molestias amet nemo fugiat excepturi nisi placeat ex est sequi distinctio.
    <img src="http://placehold.it/1000x1000" />
  </section>
</div>

Hide result