insert a line the bottom of a div - html

Question

I would like to insert a line in the bottom of a div.
My html file :
<div style="position:relative">
<div style="float:left;width:350px;height:360px;position:relative">
<img style="position:absolute;left:0;" class="circular c_imgs" src="Edit.jpg"/>
<img style="position:absolute;left:0;margin-top:175px" class="circular c_imgs" src="lessons.jpg"/>
<img style="position:absolute;right:0;" class="circular c_imgs" src="makeup.jpg"/>
<img style="position:absolute;right:0;margin-top:175px" class="circular c_imgs" src="fun.JPG"/>
</div>
<hr color="#337AB7" size="10" width="%100" style="position:absolute;bottom:0" >
</div>
what is my wrong ?
updated
my css :
.bottomdiv:after{
content:'';
width:100%;
height:10px;
position:absolute;
bottom:0;
background:#337AB7;
border-radius:5px;
}
my html file :
<div class="remodal" data-remodal-id="modal">
<div class="bottomdiv" style="position:relative">
<div style="float:left;width:350px;height:360px;position:relative">
<img style="position:absolute;left:0;" class="circular c_imgs" src="../../../20100202-Cooking-090-Edit.jpg"/>
<img style="position:absolute;left:0;margin-top:175px" class="circular c_imgs" src="../../../lessons.jpg"/>
<img style="position:absolute;right:0;" class="circular c_imgs" src="../../../makeup.jpg"/>
<img style="position:absolute;right:0;margin-top:175px" class="circular c_imgs" src="../../../fun.JPG"/>
</div>
</div>
</div>
But...

Answer 1

It should be 100% instead of %100:
<hr color="#337AB7" size="10" width="100%" style="position:absolute;bottom:0" >
Another easy way to do it is with CSS :after:
div:after{
content:'';
width:100%;
height:10px;
position:absolute;
bottom:0;
left:0;
background:#337AB7;
border-radius:5px;
}
<div></div>

Answer 2

Why don't you try wrapping all of your images inside a div .inner - then apply a border to the bottom of that... With a little tweaking you can position your images relative in a grid and add a clearfix so the inner will clear them and the line will come out of the bottom of the modal.
body {
background: #999
}
.modal {
padding: 30px;
max-width: 680px;
margin: auto;
background: white;
border-radius: 4px;
border: 1px solid #f1f1f1;
box-shadow: 0 0 8px;
}
.inner {
border-bottom: 4px solid blue;
padding-bottom: 20px;
}
img{
width: 46%;
margin: 2%;
height: 200px;
float: left;
background: aliceblue;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
<div class="modal">
<div class="inner clearfix">
<img class="circular c_imgs" src="Edit.jpg"/>
<img class="circular c_imgs" src="lessons.jpg"/>
<img class="circular c_imgs" src="makeup.jpg"/>
<img class="circular c_imgs" src="fun.JPG"/>
</div>
</div>
Pen here