Div does not respect imposed width

Asked

Viewed 53 times

0

I’m using css to create a new look for a birthday report however, when I create the structure I can’t get the internal Ivs to take up all the space on the line, they’re not occupying 50% as defined in class style. I put color background to try to understand what you’re getting but still no advances.

Link with code on https://codepen.io/lucasldm/pen/bGdjOwg

Code of the codepen below:

<html>
<style>
  #wrapper {
    display: inline-block;<html>
<style>
  #wrapper {
    display: inline-block;
    width: 420px;
    text-align: center;
    backgroud: green;
  }

  .left {
    display: inline-block;
    width: 210px !important;
    float: left;
    background: yellow;
  }

  .right {
    display: inline-block;
    width: 210px;
    background: blue;
  }

  span {
    display: block;
  }
</style>

<body>
  <div style='width: 420px;'>
    <div style='font-size: 16px;float:left;border: 2px solid #B61111;padding:6px 50px 6px 50px;background-color: #B61111;color: white;text-align: center;width: 420px;'><a style='color: white;background-color: #B61111;padding: 2 6 2 6;'>Aniversariantes dos próximos 40 dias!</a></div>
    <div id='wrapper'>
      <div class='left'><span><img style='width: 80px; height: 86px; border-radius: 50% !important;' src="https://static.businessinsider.com/image/50db38a069bedd0d1000000c-750.jpg" /></span><span>Cassiano Gaivota</span><span style='text-transform: capitalize'>quinta-feira</span></div>
      <div class='right'><span><img style='width: 80px; height: 86px; border-radius: 50% !important;'></span><span>Jean Carlos Klann</span><span style='text-transform: capitalize'>terça-feira</span></div>
      <div class='left'><span><img style='width: 80px; height: 86px; border-radius: 50% !important;'></span><span>Fulano</span><span style='text-transform: capitalize'>Sexta-feira</span></div>
    </div><br /><br />
    <div style='font-size: 16px;float:left;border: 2px solid #B61111;padding:6px 50px 6px 50px;background-color: #B61111;color: white;text-align: center;width: 420px;'><a href='http://localhost/prod/' style='color: white;background-color: #B61111;padding: 2 6 2 6;'>Ir para o portal</a></div>
  </div>
</body>

</html>
    width: 420px;
    text-align: center;
    backgroud: green;
  }

  .left {
    display: inline-block;
    width: 210px !important;
    float: left;
    background: yellow;
  }

  .right {
    display: inline-block;
    width: 210px;
    background: blue;
  }

  span {
    display: block;
  }
</style>

<body>
  <div style='width: 420px;'>
    <div style='font-size: 16px;float:left;border: 2px solid #B61111;padding:6px 50px 6px 50px;background-color: #B61111;color: white;text-align: center;width: 420px;'><a style='color: white;background-color: #B61111;padding: 2 6 2 6;'>Aniversariantes dos próximos 40 dias!</a></div>
    <div id='wrapper'>
      <div class='left'><span><img style='width: 80px; height: 86px; border-radius: 50% !important;' src="https://static.businessinsider.com/image/50db38a069bedd0d1000000c-750.jpg" /></span><span>Cassiano Gaivota</span><span style='text-transform: capitalize'>quinta-feira</span></div>
      <div class='right'><span><img style='width: 80px; height: 86px; border-radius: 50% !important;'></span><span>Jean Carlos Klann</span><span style='text-transform: capitalize'>terça-feira</span></div>
      <div class='left'><span><img style='width: 80px; height: 86px; border-radius: 50% !important;'></span><span>Fulano</span><span style='text-transform: capitalize'>Sexta-feira</span></div>
    </div><br /><br />
    <div style='font-size: 16px;float:left;border: 2px solid #B61111;padding:6px 50px 6px 50px;background-color: #B61111;color: white;text-align: center;width: 420px;'><a href='http://localhost/prod/' style='color: white;background-color: #B61111;padding: 2 6 2 6;'>Ir para o portal</a></div>
  </div>
</body>

</html>

Can someone help me and explain where I’m going wrong?

css html5 div

1 answer

2


Your problem is that the value of padding are adding to the value of the elements, and their .left and .right are as the correct sizes, what is not "correct" is to leave the padding if you add the width of the element in your case, because it is at the very value of 420px plus the paddings you gave us in the other elements.

I strongly suggest you read this, it will help you a lot! Why use/not use * box-Sizing?

inserir a descrição da imagem aqui

Now the solution, I just used the reset technique of padding, added to all elements box-sizing: border-box; as the universal dial * { }, but as I said read the link above for more details.

inserir a descrição da imagem aqui

OBS: You had written background wrong so the color green did not appear, and tb there are some open tags in your code, I left this for you to solve yourself...

Corrected code below:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

* {
    box-sizing: border-box;
  }
  
  #wrapper {
    display: inline-block;
    width: 420px;
    text-align: center;
    background: green;
  }

  .left {
    display: inline-block;
    width: 210px !important;
    float: left;
    background: yellow;
  }

  .right {
    display: inline-block;
    width: 210px;
    background: blue;
  }

  span {
    display: block;
  }
</style>

<body>
  <div style='width: 420px;'>
    <div style='font-size: 16px;float:left;border: 2px solid #B61111;padding:6px 50px 6px 50px;background-color: #B61111;color: white;text-align: center;width: 420px;'><a style='color: white;background-color: #B61111;padding: 2 6 2 6;'>Aniversariantes dos próximos 40 dias!</a></div>
    <div id='wrapper'>
      <div class='left'><span><img style='width: 80px; height: 86px; border-radius: 50% !important;' src="https://static.businessinsider.com/image/50db38a069bedd0d1000000c-750.jpg" /></span><span>Cassiano Gaivota</span><span style='text-transform: capitalize'>quinta-feira</span></div>
      <div class='right'><span><img style='width: 80px; height: 86px; border-radius: 50% !important;'></span><span>Jean Carlos Klann</span><span style='text-transform: capitalize'>terça-feira</span></div>
      <div class='left'><span><img style='width: 80px; height: 86px; border-radius: 50% !important;'></span><span>Fulano</span><span style='text-transform: capitalize'>Sexta-feira</span></div>
    </div><br /><br />
    <div style='font-size: 16px;float:left;border: 2px solid #B61111;padding:6px 50px 6px 50px;background-color: #B61111;color: white;text-align: center;width: 420px;'><a href='http://localhost/prod/' style='color: white;background-color: #B61111;padding: 2 6 2 6;'>Ir para o portal</a></div>
  </div>
</body>

</html>

Browser other questions tagged css html5 div

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