Text not contain inside div - html

Question

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 1

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>

Answer 2

use position:absolute to fix your variable on a particular position
#test{
position:absolute;
margin-top:-62px;
margin-left:-10px;
}
.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'><div id='text1'><span id="test">40</span></div></div>
<div class="box1"></div>
<div class='form2'></div>
</div>

Answer 3

Add margin-top: -64px; in #test to get it positioned inside the box
.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;
}
#test
{
margin-top: -64px;
}
<div id="container">
<div class='form1'><div id='text1'>40</div></div>
<div class="box1"></div>
<div class='form2'></div>
</div>

Answer 4

Can you explain why you are using line-height? If you remove line-height, the code works. Try it in fiddle. Comment out line-height in #container style. The text '0' will move inside the form1 and form2.