Checkbox alignment inside div - html

Question

I want to put checkbox inside a div tag. I want to create like
but the result that I get was like
the checkbox position should be at the right.

Answer 1

Create a containing div, then add three floating divs, one per element; Media element, text element, then check box. clear your float within the containing div. Place the check box in the far left div. Adjust CSS as needed.
Here is a working fiddle Check out the fiddle
#media_cont {
height:200px;
box-shadow:0px 0px 5px #000;
border-radius:10px;
padding:5px;
}
.media_content {
float:left;
width:33%;
text-align:center;
}
#checkbox {
margin-top:15%;
}
.clear {
clear:both;
}
.container {
padding-top:10px;
}
<div id="media_cont">
<div class="media_content"><img src="#" width="200" height="200"></div>
<div class="media_content">
<div>
<h2 class="header">
John Doe
</h2>
<h4 class="header">
User Profile 1
</h4>
</div>
</div>
<div id="checkbox" class="media_content"><input type="checkbox" checked></div>
<div class="clear"></div>
<div class="container">
<p>
New section
</p>
</div>
</div>
UPDATE: If you wish to have the check box clicked, simply add some JQuery such as the following:
$(document).ready(function() {
$("#profile").click(function() {
$('input[type="checkbox"]').attr("checked", "checked");
});
});
Then add the call id profile to your containing divs class.
<div id="profile" class="profile">
Here is an updated fiddle:
Click inside div and append checked into input field

Answer 2

Try the following:
.myDiv{
position: relative;
}
.myCheckbox {
position: absolute:
top: 50px; /* you compute this properly */
right: 15px; /* you compute this properly */
}

Answer 3

use awesome bootstrap checkbox
http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/