Question

I’m using Twitter Bootstrap for my wordpress site. The problem is that I just made a div as a right side bar and placed some images onto it, which seems to work fine on my desktop but when I view it on my laptop it changes its position and goes downwards.

Here is my code for the div and image placements:

<div style="position:fixed; top:188px; right:0px; border:0px solid #f00; width:25px;"><a href="#"><img src="http://pearlacademy.com/wp/wp-content/uploads/2012/10/delhi.jpg" style="margin-bottom:5px;"></a>
<a href="#"><img src="http://pearlacademy.com/wp/wp-content/uploads/2012/10/noida.jpg" style="margin-bottom:5px;"></a>
<a href="#"><img src="http://pearlacademy.com/wp/wp-content/uploads/2012/10/jaipur.jpg" style="margin-bottom:5px;"></a>
<a href="#"><img src="http://pearlacademy.com/wp/wp-content/uploads/2012/10/chennai.jpg" style="margin-bottom:5px;"></a>
</div>

Answer 1

May this approach helps, If I wanna use pure css, it would be somthing like this:

HTML:

<div class="sidebar">
    <div class="box">Your anchor tags here</div>
</div>

CSS:

html, body {
  height: 100%;
}

div.sidebar {
  position:fixed;
  right: 0px;
  width: 25px;
  height: 100%;
  border: 1px solid blue; /* just for developing, remove this later */
}

div.box {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  border: 1px solid #f00; /* depends on you ;) */
  height: 100px; /* unfortunately you have to set height property :| */
}

A live example here 😉