CODEWITHSUNDEEP
htmlcss
overexchange
overexchange

Reputation: 1

Why inner div container overflows?

From below code,

.shoppingform {
  width: 400px;
  height: 800px;
  background: #7CB9E8;
  /* url(some img)*/
  padding-left: 15px;
  padding-top: 10px;
  color: white;
  font-size: 12px;
  font-weight: bold;
  border-radius: 5px;
}
.customercardtype {
  border: 1px solid white;
  color: black;
  font-weight: normal;
  padding: 10px 2px 5px 5px;
  background: #B284BE;
  width: 90%;
  border-radius: 5px;
  position: relative;
  height: 8%;
  margin-top: 5px;
}
.customercardtype .formlabel {
  display: block;
  height: 20%
}
.customercardtype .cardtypecontainer {
  position: absolute;
  width: 100%; /* Any problem here? */
  top: 40%;
  height: 50%;
  border: 1px solid red;
}
<form class="shoppingform" action="someaction.php" method="get" enctype="multipart/form-data">
  Step3: Card details
  <div class="customercardtype">
    <label class="formlabel">Cardtype:</label>
    <div class="cardtypecontainer">

    </div>
  </div>
</form>

I would like to understand,

Why inner div container overflows?

enter image description here

Upvotes: 0

Views: 58

Answers (2)

Martin
Martin

Reputation: 1226

This is because the width of an element is actually width + left padding + right padding + left border + right border.

As your width is 100% and additional to this will push it over 100%, making it overflow its parent.

If you use box-sizing: border-box, that will fix this issue.

That's a quick summary, lots more in depth info here: https://css-tricks.com/box-sizing.

Upvotes: 3

AGE
AGE

Reputation: 3792

The reason it overflows is because position absolute visually speaking, positions your element outside the normal flow of the site. This is intentional and powerful if you use it correctly. However in your case, the parent container of cardtypecontainer was not taking control of the absolute positioned element, therefore it overflowed outside its container.

Then, I changed cardtypecontainer to have relative position, which will work as you intended it to, because relative position does not change the intended layout of the element. For your case it means, cardtypecontainer will stay within the bounds of its parent container.

.shoppingform {
  width: 400px;
  height: 800px;
  background: #7CB9E8;
  /* url(some img)*/
  padding-left: 15px;
  padding-top: 10px;
  color: white;
  font-size: 12px;
  font-weight: bold;
  border-radius: 5px;
}
.customercardtype {
  border: 1px solid white;
  color: black;
  font-weight: normal;
  padding: 10px 2px 5px 5px;
  background: #B284BE;
  width: 90%;
  border-radius: 5px;
  position: relative;
  height: 8%;
  margin-top: 5px;
}
.customercardtype .formlabel {
  display: block;
  height: 20%
}
.customercardtype .cardtypecontainer {
  position: relative;
  margin-top: 10px;
  width: 100%;
  height: 50%;
  border: 1px solid red;
}
<form class="shoppingform" action="someaction.php" method="get" enctype="multipart/form-data">
  Step3: Card details
  <div class="customercardtype">
    <label class="formlabel">Cardtype:</label>
    <div class="cardtypecontainer">

    </div>
  </div>
</form>

Upvotes: 1

Related Questions