CODEWITHSUNDEEP
htmlcss
Born2DoubleUp
Born2DoubleUp

Reputation: 109

Inner div not being contained within parent div at 100% width

I'm trying to contain the NavigationItem div within the parent div. It keeps breaking out of the parent div in my example. I know I could just use overflow: hidden; but when I center items within that div it doesn't center right. Does anyone know what I'm doing wrong?

.B2_NavigationItem {
  background: #0066a2;
  display: inline-block;
  color: #FFFFFF;
  font-size: 14px;
  margin: 0px 0px 4px 0px;
  text-align: left;
  padding: 6px;
  width: 100%;
}

.B2_NavigationItem2 {
  background: #0c3655;
  display: inline-block;
  color: #FFFFFF;
  font-size: 14px;
  margin: 0px 0px 4px 0px;
  text-align: center;
  padding: 6px;
  width: 100%;
}

.B2_NavigationItem3 {
  background: #dcdcdc;
  display: inline-block;
  border: 0px;
  color: #000000;
  font-size: 14px;
  margin: 0px 0px 4px 0px;
  padding: 6px;
  width: 100%;
}

.B2_NavigationBubble {
  background: #FFFFFF;
  display: inline-block;
  color: #000000;
  width: 90%;
  margin: 0px 0px 4px 0px;
  border: 1px solid #000000;
  border-radius: 6px;
}

.dropdown {
  float: left;
  position: relative;
  display: inline-block;
}

.dropdown-content {
  position: absolute;
  background-color: #dcdcdc;
  width: 260px;
  border: 4px solid #0066a2;
  border-radius: 0px 0px 12px 0px;
  margin: 0px 0px 0px 0px;
  padding: 4px 0px 0px 0px;
  z-index: 999;
}
<div class="dropdown">
  <div class="dropdown-content">
    <div class="B2_NavigationItem">ITEM</div>
    <div class="B2_NavigationItem">ITEM</div>
    <div class="B2_NavigationBubble">
      <div class="B2_NavigationItem2">ITEM</div>
    </div>
    <div class="B2_NavigationBubble">
      <div class="B2_NavigationItem2">ITEM</div>
    </div>
    <div class="B2_NavigationItem">ITEM</div>
  </div>
</div>

here is the code on jsfiddle: https://jsfiddle.net/gt9udvay/

Upvotes: 0

Views: 2122

Answers (2)

user4447799
user4447799

Reputation:

It's because of the padding. Having a width of 100% of the parent and the padding makes it wider than the width of the parent container. To fix that just apply box-sizing: border-box to the divs.

You can see more about box-sizing here.

.B2_NavigationItem {
  background: #0066a2;
  display: inline-block;
  color: #FFFFFF;
  font-size: 14px;
  margin: 0px 0px 4px 0px;
  text-align: left;
  padding: 6px;
  width: 100%;
}

.B2_NavigationItem2 {
  background: #0c3655;
  display: inline-block;
  color: #FFFFFF;
  font-size: 14px;
  margin: 0px 0px 4px 0px;
  text-align: center;
  padding: 6px;
  width: 100%;
}

.B2_NavigationItem3 {
  background: #dcdcdc;
  display: inline-block;
  border: 0px;
  color: #000000;
  font-size: 14px;
  margin: 0px 0px 4px 0px;
  padding: 6px;
  width: 100%;
}

.B2_NavigationBubble {
  background: #FFFFFF;
  display: inline-block;
  color: #000000;
  width: 90%;
  margin: 0px 0px 4px 0px;
  border: 1px solid #000000;
  border-radius: 6px;
}

.dropdown {
  float: left;
  position: relative;
  display: inline-block;
}

.dropdown-content {
  position: absolute;
  background-color: #dcdcdc;
  width: 260px;
  border: 4px solid #0066a2;
  border-radius: 0px 0px 12px 0px;
  margin: 0px 0px 0px 0px;
  padding: 4px 0px 0px 0px;
  z-index: 999;
}

.dropdown-content div {
  box-sizing: border-box; /*apply where applicable*/
}
<div class="dropdown">
  <div class="dropdown-content">
    <div class="B2_NavigationItem">ITEM</div>
    <div class="B2_NavigationItem">ITEM</div>
    <div class="B2_NavigationBubble">
      <div class="B2_NavigationItem2">ITEM</div>
    </div>
    <div class="B2_NavigationBubble">
      <div class="B2_NavigationItem2">ITEM</div>
    </div>
    <div class="B2_NavigationItem">ITEM</div>
  </div>
</div>

Upvotes: 1

TacoWilson
TacoWilson

Reputation: 100

You could change padding to be 0px on the left and right like.....

.B2_NavigationItem2 {
  background: #0c3655;
  display: inline-block;
  color: #FFFFFF;
  font-size: 14px;
  margin: 0px 0px 4px 0px;
  text-align: center;
  padding: 6px 0px;
  width: 100%;
}

Upvotes: 1

Related Questions