CODEWITHSUNDEEP
css
user3303274
user3303274

Reputation: 749

Prevent content from wrapping around floated element

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

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

My wrapper div consists of aside and section.I tried to align them side by side with total width of the container. But it always appear that section overflows.I wonder why? The total width of aside plus section has never crossed width of its wrapper container.It only works if I put overflow:hidden in the section.

Upvotes: 4

Views: 337

Answers (1)

DavidDomain
DavidDomain

Reputation: 15303

All you need to do to overcome the effect of the section overflowing is to set overflow to auto on the section. Now you will not need to set float on the 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>

but be aware of the fact that if the content (any child elements) of section are extending the boundary of section will cause scrollbars on the section. So keep that in mind. You could as well use overflow:hidden which will work as well in your situation, but then any content that exceeds the boundary of section will be hidden. In case of overflow:hidden you could do the following to prevent this behavior. An example with an image as a child element of section could look like this.

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

Upvotes: 2

Related Questions