CODEWITHSUNDEEP
htmlcss
user297904
user297904

Reputation: 447

Image changing div position

I am trying to make two columns separated by or inside a circle page the second column should have an image it like this : 

<div class="step second">
  <div id="upload-img"></div>
  <div id="sperator">
    <div class="circle" id="or"><p class="number" style="padding-left:25%;">or</div>
  </div>
  <div id="default-img">
    <img src=""/>
  </div>
</div>

But for some reason the position of the #sperator div is changing with the image my css is bit long so here is a js fiddle for more explaining : here

As you can see the image should be in the same line with the other div but its changing the position of the separator div

Upvotes: 0

Views: 551

Answers (1)

vozaldi
vozaldi

Reputation: 97

You should re-check your html tags. Make sure each tag closed correctly

Here your css :

.step{
    position:relative;
    width:500px;
    height:250px;
    border:1px solid black;
}
#upload-img{
    position:absolute;
    left:0;
    top:0;
    width:50%;
    height:100%
}

#default-img{
    position:absolute;
    right:0;
    top:0;
    width:50%;
    height:100%
    }
#upload-img img, #default-img img{
    max-width:100%;
    max-height:100%;    
}

#sperator .circle{
    position:absolute;
    height:66px;
    width:66px;
    background-color:black;
    top:50%;
    left:50%;
    margin:-33px auto auto -33px;
    border-radius:50%;
    z-index:100;
    text-align:center;
}
#sperator .circle p{
  font-size:35px;
  font-family:futura-book;
  color:white;    
  padding:0 !important;
  margin:0;
  line-height:60px;
}
.step::after{
    content:'';
    height:100%;
    width:3px;
    left:50%;
    margin-left:-2px;    
    z-index:90;
    position:absolute;
    background-color:black;
}

potition:relative will be an area that will "lock" every potition:absolute inside it.

You can use position:relative as parent div and position:absolute as child div.

Upvotes: 1

Related Questions