CODEWITHSUNDEEP
css
John M.
John M.

Reputation: 2712

<div> element falls outside of border

I'm trying to draw the black border around Test1 - Test4 to also span around Test5. At the moment, Test5 falls outside. Does anyone know how to draw it to include Test5?

.description {
  border: 1px solid;
}

.descriptionTop {
  display: inline-block;
}

.ao {
  padding: 5px;
  font-weight: 700;
  text-transform: uppercase;

}

.pr {
  text-align: right;
  float: right;
}

.pm {
  border: solid 1px #53a318;
  border-radius: 3px;
  color: #53a318;
  box-sizing: border-box;
  font-size: 12px;
  float: right;
  padding: 2px 8px;
}
<div class="description">
  <div class="descriptionTop">
    <span class="descriptionLeft">Test1</span>
    <span class="ao">Test2</span>
  </div>
  <div class="pr">
    <div>
      <span>Test3</span>
      <span>Test4</span>
    </div>
    <div class="pm">Test5</div>
  </div>
</div>

Upvotes: 0

Views: 59

Answers (2)

Programmer
Programmer

Reputation: 2123

This is because .prices has float. Explanation of the problem

add the following to your css (the css of famous clearfix class) - 

.description:after {
    content: "";
    display: table;
    clear: both;
}


.description {
  border: 1px solid;
}

.description:after {
    content: "";
    display: table;
    clear: both;
}

.descriptionTop {
  display: inline-block;
}

.ao {
  padding: 5px;
  font-weight: 700;
  text-transform: uppercase;

}

.pr {
  text-align: right;
  float: right;
}

.pm {
  border: solid 1px #53a318;
  border-radius: 3px;
  color: #53a318;
  box-sizing: border-box;
  font-size: 12px;
  float: right;
  padding: 2px 8px;
}
<div class="description">
  <div class="descriptionTop">
    <span class="descriptionLeft">Test1</span>
    <span class="ao">Test2</span>
  </div>
  <div class="pr">
    <div>
      <span>Test3</span>
      <span>Test4</span>
    </div>
    <div class="pm">Test5</div>
  </div>
</div>

Upvotes: 0

Johannes
Johannes

Reputation: 67778

Add overflow: auto; to the container to include floated elements:

.description {
  border: 1px solid;
  overflow: auto;
}

.descriptionTop {
  display: inline-block;
}

.altOffer {
  padding: 5px;
  font-weight: 700;
  text-transform: uppercase;

}

.prices {
  text-align: right;
  float: right;
}

.promotion {
  border: solid 1px #53a318;
  border-radius: 3px;
  color: #53a318;
  box-sizing: border-box;
  font-size: 12px;
  float: right;
  padding: 2px 8px;
}
<div class="description">
  <div class="descriptionTop">
    <span class="descriptionLeft">Test1</span>
    <span class="altOffer">Test2</span>
  </div>
  <div class="prices">
    <div>
      <span>Test3</span>
      <span>Test4</span>
    </div>
    <div class="promotion">Test5</div>
  </div>
</div>

Upvotes: 4

Related Questions