HTML: FLOAT RIGHT, FLOAT LEFT

Asked

Viewed 62 times

-5

Guys, I’m looking at Guanabara’s HTML lessons from almost 8 years ago and the first problem appeared. I’m doing exactly as he does, however, when I was divided into two sessions the site, the words do not depart, even putting the same dimensions of it. If I decrease one and increase another, or vice versa the texts only stretch to the right or left, but remain glued.

This is the code I’m using to make the float, in case you need more I put.

section#corpo {
display: block;
width: 500px;
float: left;

}
aside#lateral {
    display: block;
    width: 350px;
    float: right
}

Essa é a imagem com os textos colados. Obrigado desde já.

html

  • You must add the element margin to its column element. The value could put 5pxand increase as needed.

  • the body tag, or another parent tag may be set to exactly 500px+350px

1 answer

-2

Speak Rafael beauty? , not to let the words stick you can add a Padding-left in Aside:

aside#lateral { 
  display: block;
  width: 350px;
  float: right;

  padding-left: 20px;
}

Or add a Padding-right to the Section:

section#corpo {
  display: block;
  width: 500px;
  float: left;

  padding-right: 20px;
}

My opinion: We no longer use Float right/left, the wave is now use flexbox, follows below as vc could transform your code to flexbox..

HTML code

<div class="container">
  <section class="corpo">

  </section>
  <aside class="lateral">

  </aside>
</div>

CSS code

.container {
  display:flex;
  justify-content:space-between;
}

.corpo {
  width: calc(60% - 20px);
  margin-right: 20px;
}

.lateral {
  width: 40%;
}

Always use the percentage values to get a fluid layout..

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.