Snappysites Snappysites - 3 months ago 8
CSS Question

Found a Div style online although can't figure out how to place text within the Div

I found a nice responsive rectangle Div online with these style attributes:

.flex-rectangle{
margin-left:16%;
margin-right:16%;
max-width:728px;
width:100%;
max-height:90px;
height:auto;
background: #999;
}
.flex-rectangle:before{
content: "";
display: block;
padding-top: 25%;
}


Although I am looking to place text within the Div, with their own styles and links etc...

<div class="flex-rectangle" align="center">
<a href=""><? echo $ad_catch_line; ?></a><br />
<? echo $ad_line_1; ?>
</div>


Yet for some reason anything inside the Div seems to display underneath and not on top? Any idea how to resolve this problem?

Answer

You can't put text in the div AND have the padding on the pdeudo-element. The padding is what drives the size of the div.

You'd need to absolutely position the text on top of the div.

.flex-rectangle {
  margin: auto;
  max-width: 728px;
  width: 100%;
  max-height: 90px;
  height: auto;
  background: #999;
  position: relative;
}

.flex-rectangle:before {
  content: "";
  display: block;
  padding-top: 25%;
}

.inner {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  
  /* not required - just for demo */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color:white;
  
}
<div class="flex-rectangle">
  <div class="inner">
    <a href="#1">Link</a>
    <span>Some Other text</span>
  </div>  
</div>