Andy Andy - 3 months ago 10
CSS Question

right: 0 won't work with absolute positioning

I'm developing a site using Bootstrap 3.3.6

I've followed a tutorial on creating a responsive banner slider like this: http://www.jqueryscript.net/slider/Full-Width-Responsive-Carousel-with-jQuery-Bootstrap.html

I'd like to have options to position the text (which is inside

.carousel-caption
) on either the right or left of the banner, occupying 50% of the available width.

The markup I have for the first slide is like this:

<div class="carousel-inner">
<div class="item active">
<div class="fill" style="background-image:url('foo.jpg');"></div>
<div class="carousel-caption">
<h3>Hello World</h3>
<p>Some more text</p>
</div>
</div>
</div>


Positioning it to the right won't work using the following CSS (it remains on the left). It's as though
right: 0;
isn't being obeyed, even though
.carousel-caption
is positioned absolutely using Bootstrap.

.carousel-caption {
max-width: 500px;
top: 0;
right: 0;
bottom: auto;
}


I also realise that setting the
max-width
to 500px isn't really ideal, but when I tried 50% it seems to inherit the width of the whole browser window?

Answer

By default the caption has right:20%; left: 20%, so only changing the right to 0 will only move the right further right. You need to change left to 50% (if you only want it to be half width):

.carousel-caption {
  max-width: 500px;
  top: 0;
  right: 0;
  left: 50%;
  bottom: auto;
}

Although, now I noticed you have a max width so not sure if this would start from the left or right. To solve this, you need to cancel the left and add a width of 50%:

.carousel-caption {
  width: 50%;
  max-width: 500px;
  top: 0;
  right: 0;
  left: auto;
  bottom: auto;
}

This should make it right aligned and 50% width up to a max width of 500px, but always placed on the right

Comments