For my right column implementation, I decided to use CSS position:relative and put different elements inside in position:absolute as shown below:
<!-- Right Column -->
<div class="col-xs-3 pl18" style="position:relative;">
<!-- Without insurance -->
<div class="row pt23 p-absolute t141" >
#parse('/right-col/sans-assurance.html.vtl')
</div><!-- end row alc mb30 -->
...
</div><!-- end col-xs-3 -->
<!-- Right Column -->
However, whenever I add a new element at the top of my right column, all the subsequent elements shift downwards. I have tried using jQuery without success. Can someone please suggest some ideas for fixing this issue?
Thank you.
I ran a test with the following code:
<body>
<div>Hello</div>
<div class="row" style="position: relative;">
<div class="col-xs-3" style="position: absolute;top:10px;" >
Ola
<img src="fig-a01a.jpg" style="height: 100px;width: 100px;">
</div>
<div class="col-xs-3" style="position: absolute;top:200px;">
querida
<img src="Arthur.jpg" style="height: 100px;width: 100px;">
</div>
<div class="col-xs-1" style="position: absolute;top:400px;">
sin tchao
<img src="c.jpg" style="height: 100px;width: 100px;">
</div>
<div class="col-xs-1" style="position: absolute;top: 20px;">
anh phuong
</div>
<div class="col-xs-1" style="position: absolute;">
princessa
</div>
</div>
</body>
Interestingly, no gap is created between the components with this test code. In contrast, there seems to be a gap when using my initial block of code. I am unsure why this is the case. Any suggestions on how to resolve this discrepancy would be greatly appreciated...