CODEWITHSUNDEEP
htmlcss
Dharmesh Vekariya
Dharmesh Vekariya

Reputation: 1146

How to solve overlayping issue?

Please help me why my content is overlap in bottom padding area i want space bottom and top but top space working fine but bottom padding area is overlapping content.

what is solution for this type of issue. also suggestion to me scroll content area when enter large text in box. i have also attachment of overlapping image plase check.

Thanks in Advance.

enter image description here

* {
  box-sizing: border-box;
}

.box {                
  width: 400px;
  height: 200px;
  margin: 0 auto;
  position: relative;
}
img {
  max-width: 100%;
}
.content {
  position: absolute;
  height: 100%;
  bottom: 20px;
  padding: 15px;
  overflow: hidden;
  left: 0;
  background-color: rgba(0,0,0,0.5);
  color: #fff;
  top: 0;
}
.content p {
  margin-bottom: 0;
}
<section class="features-box-style">
  <div class="box">
    <div class="image">
      <img src="http://placekitten.com/1000/500" alt="" />
    </div>
    <div class="content">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer</p>
    </div>
  </div>
</section>

Upvotes: 1

Views: 51

Answers (2)

Soothran
Soothran

Reputation: 1243

* {
  box-sizing: border-box;
}

.box {                
  width: 400px;
  height: 200px;
  margin: 0 auto;
  position: relative;
}
img {
  max-width: 100%;
}
.content {
  position: absolute;
  height: 100%;
  bottom: 20px;
  padding: 15px;
  overflow: hidden;
  left: 0;
  background-color: rgba(0,0,0,0.5);
  color: #fff;
  top: 0;
}
.content-wrapper{
height: 100%;
overflow-y: auto;
}
.content p {
  margin-bottom: 0;
}
/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
<section class="features-box-style">
  <div class="box">
    <div class="image">
      <img src="http://placekitten.com/1000/500" alt="" />
    </div>
    <div class="content">
<div class="content-wrapper">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer</p>
</div>
    </div>
  </div>

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 273086

In this case you can easily consider transparent border instead of padding

* {
  box-sizing: border-box;
}

.box {                
  width: 400px;
  height: 200px;
  margin: 0 auto;
  position: relative;
}
img {
  max-width: 100%;
}
.content {
  position: absolute;
  bottom:0;
  left: 0;
  right:0;
  top: 0;
  border: 15px solid transparent;
  overflow: hidden;
  background-color: rgba(0,0,0,0.5);
  color: #fff;
}
.content p {
  margin: 0;
}
<section class="features-box-style">
  <div class="box">
    <div class="image">
      <img src="http://placekitten.com/1000/500" alt="" />
    </div>
    <div class="content">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer</p>
    </div>
  </div>
</section>

Upvotes: 1

Related Questions