CODEWITHSUNDEEP
htmlcss
S.M_Emamian
S.M_Emamian

Reputation: 17383

insert a line the bottom of a div

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 ?

enter image description here

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... enter image description here

Upvotes: 1

Views: 4904

Answers (2)

matthewelsom
matthewelsom

Reputation: 944

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

Upvotes: 1

Jacob G
Jacob G

Reputation: 14172

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>

Upvotes: 3

Related Questions