CODEWITHSUNDEEP
twitter-bootstrapcss
don505
don505

Reputation: 162

CSS - vertical divider between space on Resize

I'm trying to add a vertical divider centered in space between 'id_first' and 'id_second' columns. The divider must maintain the center between two columns even on window resize.

for (var i = 0; i < 20; i++) {
  $('#id_first').append('<div class=" boxd"> hi </div>');
}
for (var i = 0; i < 40; i++) {
  $('#id_second').append('<div class="btn-primary boxl"> hi </div>');
}
.first {
  height: 100%;
  min-height: 100px
}
.second {
  height: 100%;
  min-height: 100px
}
.boxd {
  width: 120px;
  height: 120px;
  display: inline-block;
  margin: 10px;
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR6SU9F8LWgXhXz3D0bjCSqvtvF-JPZxaQWk9-u0fhl0-Yin-ET4IxH5g');
}
.boxl {
  width: 100%;
  height: 20px;
  margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div id="id_first" class="col-xs-8 first">
  </div>
  <div id="id_second" class="col-xs-4 second">
  </div>
</div>

enter image description here enter image description here

Upvotes: 1

Views: 669

Answers (1)

Majid
Majid

Reputation: 2900

Simply add 

.row.vdivide [class*='col-']:not(:last-child):after {
  background: #e0e0e0;
  width: 1px;
  content: "";
  display:block;
  position: absolute;
  top:0;
  bottom: 0;
  right: 0;
  min-height: 70px;
}

and change your html to 

<div class="container">
    <div class="row vdivide">
        <div id="id_first" class="col-xs-8 first"></div>
        <div id="id_second" class="col-xs-4 second"></div>
     </div>
</div>

Demo : https://jsfiddle.net/mhadaily/no8pLpq5/

There are other approaches that we can implement.

Upvotes: 2

Related Questions