button not staying within div - html

Question

I have a <div> and a <button>, but for some reason, the button will not stay in the div.
I have tried to clear the div, as well as float: left but it has not helped.
I have also added padding to the bottom of the div, but I don't think that is the solution.
My code:
<div class="service-text text2">
<p>
this is some text
</p>
<i class="fa fa-credit-card" style="padding-right:10px;"></i> Learn More
</div>
JSFiddle

Answer 1

Usually parent div set its height auto to its child heights, but padding you assigned to button-learn is causing the issue.
you just need to set display:inline-block; on your anchor tag
An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.
.button-learn {
margin: 2px;
position:relative;
text-align: center;
border-radius:4px;
text-decoration: none;
font-family:'PT Sans',helvetica;
background: #69c773;
display:inline-block;
font-size: 17px !important;
padding: 10px 10px 10px 10px;
color: #FFF;
}
Here is fiddle

Answer 2

Floating both the elements seems to do what you want, unless you want the button to be next to the text.
add these:
.service-text {
float: left;
}
.button-learn {
float:left;
}
or check: http://jsfiddle.net/Milanzor/Qt9u3/4/

Answer 3

working demo
Set document height first:
body, html {
height:100%
}
then set .service-text height:
.service-text {
margin:0;
width:100%;
height:100%; /* change this from auto */
display:block;
background-color:#34495e;
-moz-border-radius: 0px;
-webkit-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
}
and it works!! :)
EDIT
div inside another div
HTML
<div id="parent">
<div class="service-text text2">
<p>this is some text</p>
<i class="fa fa-credit-card" style="padding-right:10px;"></i> Learn More
CSS
body, html {
height:100%;
margin:0;
padding:0;
}
#parent {
height:100%; /* remove this and everything falls out of place*/
}
.service-text {
margin:0;
width:100%;
height:100%;
display:block;
background-color:#34495e;
-moz-border-radius: 0px;
-webkit-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
}
.service p {
margin:0;
padding-top:5px;
padding-bottom:10px;
padding-right:7px;
padding-left:15px;
font-family:'PT Sans', 'Arial', 'Open Sans';
font-size:14px;
line-height:22px;
color:white;
display: block;
position:relative;
}
.button-learn {
margin: auto;
position:relative;
text-align: center;
border-radius:4px;
text-decoration: none;
font-family:'PT Sans', helvetica;
background: #69c773;
font-size: 17px !important;
padding: 10px 10px 10px 10px;
color: #FFF;
}
.button-learn:hover {
color: #51A65F;
}
</div>
</div>
Explaination : you just need to set the height of the div always, once you set it.....you'll get the desired view!