I am currently working on a grid system that displays flight information in 10 columns, with a select button and price in 2 columns. I am facing an issue where adding a border to separate the select button section from the rest of the flight information only draws a line halfway. I suspect this may be due to my row/column structure. How can I fix this problem?
Any help would be greatly appreciated!
Outcome:
CSS:
.selectButtonColumn{
border-left: 1px solid;
}
HTML:
<div class="container well well-md searchResult">
<ul class="list-group">
<li class="list-group-item">
<div class="row">
<div class="col-md-10">
<div class="departFlyRow">
<div class="col-md-2 col-md-offset-2">
<div><b>06:20</b></div>
<div>LHR</div>
</div>
<div class="col-md-2">
<i class="btn btn-default"><i class="glyphicon glyphicon-plane gly-rotate-90"></i> </i>
</div>
<div class="col-md-2">
<div>5h 30</div>
<div>direct</div>
</div>
<div class="col-md-2">
<i class="btn btn-default"><i class="glyphicon glyphicon-plane gly-rotate-90"></i> </i>
</div>
<div class="col-md-2">
<div><b>12:50</b></div>
<div>SVO</div>
</div>
</div>
<div class="clearfix returnFlyRow">
<hr>
<div class="col-md-2 col-md-offset-2">
<div><b>06:20</b></div>
<div>SVO</div>
</div>
<div class="col-md-2">
<i class="btn btn-default"><i class="glyphicon glyphicon-plane gly-rotate-90"></i> </i>
</div>
<div class="col-md-2">
<div>5h 30</div>
<div>direct</div>
</div>
<div class="col-md-2">
<i class="btn btn-default"><i class="glyphicon glyphicon-plane gly-rotate-90"></i> </i>
</div>
<div class="col-md-2">
<div><b>12:50</b></div>
<div>LHR</div>
</div>
</div>
</div>
<div class="col-md-2 selectButtonColumn">
<div><b>£100</b></div>
<button type="button" class="btn btn-success">Select</button>
</div>
</div>
</li>
</ul>
</div>