CODEWITHSUNDEEP
htmlcssbootstrap-4
Ak Ak
Ak Ak

Reputation: 81

adding div messes the entire design

Pleas have a look at my code here.

http://jsfiddle.net/xymgwonu/3/

The code works fine, until I add a new div <div class="bubble"> </div>. It messes with my entire design. I am trying to align bubble with the horizontal line,but it makes a gap b/w circle and the below vertical line.

Upvotes: 0

Views: 73

Answers (2)

Ahmet Zeybek
Ahmet Zeybek

Reputation: 1224

HTML:

<div class="group">
  <div class="vl"></div>
  <div class="circle"> </div>
  <hr class="hr" />
  <div class="bubble"></div>
</div>

<div class="group">
  <div class="vl"></div>
  <div class="circle"> </div>
  <hr class="hr" />
  <div class="bubble"></div>
</div>

<div class="group">
  <div class="vl"></div>
  <div class="circle"> </div>
  <hr class="hr" />
  <div class="bubble"></div>
</div>

CSS:

.group {
  padding:10px;
}

.vl {
  margin-left: 50px;
  padding: 50px;
  position: relative;
  border-left: 5px solid blue;
}

.circle {
  color: white;
  margin-left: 46px;
  width:10px;
  height:10px;
  border: 2px solid #666666;
  border-radius: 50%;
  z-index:2
}

.hr {
  margin-left: 60px;
  margin-top: -10px;
  width: 250px;
  border-top: 5px solid #ccc;
}

/* This is for the cloud */

.bubble {
  position: relative;
  margin-top:-40px;
  margin-left:340px;
  background-color: #F2F2F2;
  border-radius: 5px;
  box-shadow: 0px 0px 6px #B2B2B2;
  height: 100px;
  width: 275px;
}

.bubble::after {
  background-color: #F2F2F2;
  box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4);
  content: "\00a0";
  display: block;
  overflow: auto;
  height: 20px;
  left: -10px;
  position: relative;
  top: 20px;
  transform: rotate( 45deg);
  -moz-transform: rotate( 45deg);
  -ms-transform: rotate( 45deg);
  -o-transform: rotate( 45deg);
  -webkit-transform: rotate( 45deg);
  width: 20px;
}

You can duplicate <div class="group"></div> for each item

Upvotes: 0

Waheed
Waheed

Reputation: 638

here you go, enjoy it :) http://jsfiddle.net/xymgwonu/13/ 

 .bubble {position:absolute; margin-top: -40px;}

Upvotes: 1

Related Questions