Carlos Frank Carlos Frank - 14 days ago 6
CSS Question

Text not contain inside div

I need to get the text of div with id='form1' and id='form2' to fit inside their respective container. Currently, the number 40 should be inside the white box on the left but for some reason, it got pushed down.I have tried inserting span and div tag inside form1/form2 but it doesn't do anything. I also try word-wrap in CSS and nothing change.



.form1{
width: 20%;
height: 8%;
float: left;
background: white;
margin-top: 55%;
border-radius: 0px 20px 20px 0px;
opacity: .5;
position: absolute;
}
.form2{
width: 20%;
height: 8%;
float: right;
margin-top: 55%;
background: white;
border-radius: 20px 0px 0px 20px;
opacity: .5;
}
.box1{
width: 60%;
height: 50%;
background: url(http://i.imgur.com/lpaxZUu.png) center no-repeat ;
vertical-align:center;
position: absolute;
margin: 30% 20%;

}
#container
{
width: 10em;
height: 12em;
font-size: 2em;
text-align: center;
line-height: 5em;
margin: 3em auto;
border: 2px solid #666;
border-radius: 7px;
position: relative;
overflow: hidden;

}
#container:before
{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(http://i.imgur.com/opsUkHF.png) center ;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s
-o-transition: all 1s;
transition: all 1s;
}
.transform:before {
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
.text1{
width: 100%;
height: 100%;
background: black;
position: absolute;
font-size: 20px;
display: inline-block;
}

<div id="container">
<div class='form1'>40</div>
<div class="box1"></div>
<div class='form2'></div>
</div>





Here is the jsfiddle to illustrate the code : https://jsfiddle.net/xffc49qL/8/

Answer

Your form1 containers line-height is the reason why your text is out of the box. change it to line-height: normal, it should bring back the content within the form1. Also, absolute doesn't have any impact in your case, as the element is float already.

All you need to change is form1 elements line-height.

.form1 {
  width: 20%;
  height: 8%;
  float: left;
  background: white;
  margin-top: 55%;
  border-radius: 0px 20px 20px 0px;
  opacity: .5;
  line-height: normal;
}
.form2 {
  width: 20%;
  height: 8%;
  float: right;
  margin-top: 55%;
  background: white;
  border-radius: 20px 0px 0px 20px;
  opacity: .5;
}
.box1 {
  width: 60%;
  height: 50%;
  background: url(http://i.imgur.com/lpaxZUu.png) center no-repeat;
  vertical-align: center;
  position: absolute;
  margin: 30% 20%;
}
#container {
  width: 10em;
  height: 12em;
  font-size: 2em;
  text-align: center;
  line-height: 5em;
  margin: 3em auto;
  border: 2px solid #666;
  border-radius: 7px;
  position: relative;
  overflow: hidden;
}
#container:before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  z-index: -1;
  background: url(http://i.imgur.com/opsUkHF.png) center;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s -o-transition: all 1s;
  transition: all 1s;
}
.transform:before {
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  transform: rotate(-30deg);
}
.text1 {
  width: 100%;
  height: 100%;
  background: black;
  position: absolute;
  font-size: 20px;
  display: inline-block;
}
<div id="container">
  <div class='form1'>40</div>
  <div class="box1"></div>
  <div class='form2'></div>
</div>