Search code examples
htmlcsscss-shapescss-transforms

Containers have same undesired width

I have two containers that make up a transparent border that has a 45 degree angle in it. For some reason the second container maintains the same width/padding as the first container. I want the second container to maintain its own width/padding. Essentially, 30px of padding horizontally to each container, but not the same size.

What am I doing wrong? Here is a fiddle....Click for fiddle

.home-img-text {
  position: absolute;
  left: 13%;
  top: 25%;
}
#home-img-text-container1,
#home-img-text-container2 {
  position: relative;
  margin-bottom: 20px;
  opacity: 1;
  transition: 1s;
  -webkit-transition: 1s;
  overflow: hidden;
}
#home-img-text-container1.fadeDisplay {
  opacity: 1;
  transform: translateX(30px);
  -webkit-transform: translateX(30px);
}
#home-img-text-container2.fadeDisplay {
  opacity: 1;
  transform: translateX(30px);
  -webkit-transform: translateX(30px);
}
#home-img-text-description,
#home-img-text-description2 {
  position: relative;
  margin: 30px 0px;
  padding: 30px 20px;
  color: #FFF;
  background: rgba(0, 0, 0, .8);
  font-size: 2.5em;
  line-height: 1.4em;
}
#home-img-text-description:before,
#home-img-text-description2:before {
  position: absolute;
  content: '';
  height: 30px;
  width: 100%;
  left: 0px;
  background: inherit;
}
/*#home-img-text-description2:before {
width: 80%;
}*/
#home-img-text-description:before,
#home-img-text-description2:before {
  top: -30px;
  transform: skewX(45deg);
  transform-origin: right bottom;
}
#home-img-text-description {
  font-family: 'open_sanslight';
}
#home-img-text-description2 {
  color: #efcd36;
  font-size: 1.8em;
}
<div class="home-img-text">
  <div id="home-img-text-container1">
    <div id="home-img-text-description">WRECKING <span class="block"></span>& DEMOLITION
      <br>DONE RIGHT.</div>
  </div>
  <div id="home-img-text-container2">
    <div id="home-img-text-description2">YOU NAME IT,
      <br>WE WRECK IT.</div>
  </div>
</div>

Solution

  • There are two possible solutions if you want each container to take up only a certain width (either a fixed width or the width it requires to fit contents). Currently there is no width specified and they are block level elements, so they expand as much as possible. The first container has a lengthy text and so it expands to fit the content (until the point where it cannot extend further) and along with it, parent (#home-img-text) also expands since that doesn't have any fixed width either. Since both containers are part of the same parent, the second container also expands to occupy the full width of the parent (as it is a block container). Thus both of them are getting the same width.

    One of them would be to assign display: inline-block to the two containers like in below snippet.

    .home-img-text {
  position: absolute;
  left: 13%;
  top: 25%;
}
#home-img-text-container1,
#home-img-text-container2 {
  position: relative;
  margin-bottom: 20px;
  opacity: 1;
  transition: 1s;
  -webkit-transition: 1s;
  overflow: hidden;
}
#home-img-text-container1.fadeDisplay {
  opacity: 1;
  transform: translateX(30px);
  -webkit-transform: translateX(30px);
}
#home-img-text-container2.fadeDisplay {
  opacity: 1;
  transform: translateX(30px);
  -webkit-transform: translateX(30px);
}
#home-img-text-description,
#home-img-text-description2 {
  position: relative;
  display: inline-block;
  margin: 30px 0px;
  padding: 30px 20px;
  color: #FFF;
  background: rgba(0, 0, 0, .8);
  font-size: 2.5em;
  line-height: 1.4em;
}
#home-img-text-description:before,
#home-img-text-description2:before {
  position: absolute;
  content: '';
  height: 30px;
  width: 100%;
  left: 0px;
  background: inherit;
}
#home-img-text-description:before,
#home-img-text-description2:before {
  top: -30px;
  transform: skewX(45deg);
  transform-origin: right bottom;
}
#home-img-text-description {
  font-family: 'open_sanslight';
}
#home-img-text-description2 {
  color: #efcd36;
  font-size: 1.8em;
}
    <div class="home-img-text">
  <div id="home-img-text-container1">
    <div id="home-img-text-description">WRECKING <span class="block"></span>& DEMOLITION
      <br>DONE RIGHT.</div>
  </div>
  <div id="home-img-text-container2">
    <div id="home-img-text-description2">YOU NAME IT,
      <br>WE WRECK IT.</div>
  </div>
</div>

    The other would be to assign them an explicit width as required.

    .home-img-text {
  position: absolute;
  left: 13%;
  top: 25%;
}
#home-img-text-container1,
#home-img-text-container2 {
  position: relative;
  margin-bottom: 20px;
  opacity: 1;
  transition: 1s;
  -webkit-transition: 1s;
  overflow: hidden;
}
#home-img-text-container1.fadeDisplay {
  opacity: 1;
  transform: translateX(30px);
  -webkit-transform: translateX(30px);
}
#home-img-text-container2.fadeDisplay {
  opacity: 1;
  transform: translateX(30px);
  -webkit-transform: translateX(30px);
}
#home-img-text-description,
#home-img-text-description2 {
  position: relative;
  margin: 30px 0px;
  padding: 30px 20px;
  color: #FFF;
  background: rgba(0, 0, 0, .8);
  font-size: 2.5em;
  line-height: 1.4em;
}
#home-img-text-description:before,
#home-img-text-description2:before {
  position: absolute;
  content: '';
  height: 30px;
  width: 100%;
  left: 0px;
  background: inherit;
}
#home-img-text-description:before,
#home-img-text-description2:before {
  top: -30px;
  transform: skewX(45deg);
  transform-origin: right bottom;
}
#home-img-text-description {
  font-family: 'open_sanslight';
}
#home-img-text-description2 {
  color: #efcd36;
  font-size: 1.8em;
}
#home-img-text-description {
  width: 300px;
}
#home-img-text-description2 {
  width: 200px;
}
    <div class="home-img-text">
  <div id="home-img-text-container1">
    <div id="home-img-text-description">WRECKING <span class="block"></span>& DEMOLITION
      <br>DONE RIGHT.</div>
  </div>
  <div id="home-img-text-container2">
    <div id="home-img-text-description2">YOU NAME IT,
      <br>WE WRECK IT.</div>
  </div>
</div>