轮播字幕向右移动并占据轮播的一半

Question

I need to make my bootstrap 3 carousel-caption take half of my carousel , to make caption background-color a little transparent, and write some text into it.

So the logic is that in carousel background I will have pictures and for every picture caption will take half of carousel whit custom text.

See my JSFIDDLE example, and I want to make it like this.

So far I manage to set up background of carousel-caption , and I know how to pull it to the left, the problem is right side, it's just confusing how does float: right want work, further more there is a small padding-bottom so how can I remove this? Can any one help me over come this and build it properly, thanks.

<!-- Carousel -->
<div id="homeCarousel" class="carousel slide">
    <!-- Menu -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <!-- Items -->
    <div class="carousel-inner">
        <!-- Item 1 -->
        <div class="item active">
            <img src="http://lorempixel.com/1500/600/abstract/1" />
            <div class="container">
                <div class="carousel-caption">
                     <h1>Bootstrap 3 Carousel Layout</h1>

                    <p>This is an example layout with carousel that uses the Bootstrap 3 styles.</p>
                    <p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a>

                    </p>
                </div>
            </div>
        </div>
        <!-- Item 2 -->
        <div class="item">
            <img src="http://lorempixel.com/1500/600/abstract/2" />
            <div class="container">
                <div class="carousel-caption">
                     <h1>Changes to the Grid</h1>

                    <p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
                    <p><a class="btn btn-large btn-primary" href="#">Learn more</a>

                    </p>
                </div>
            </div>
        </div>
        <!-- Item 3 -->
        <div class="item">
            <img src="http://lorempixel.com/1500/600/abstract/3" />
            <div class="container">
                <div class="carousel-caption">
                     <h1>Percentage-based sizing</h1>

                    <p>With "mobile-first" there is now only one percentage-based grid.</p>
                    <p><a class="btn btn-large btn-primary" href="#">Browse gallery</a>

                    </p>
                </div>
            </div>
        </div>
    </div>
    <!-- Controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
 <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="icon-next"></span>
  </a> 
</div>

Carousel CSS:

#carouselButtons {
    margin-left: 100px;
    position: absolute;
    bottom: 0px;
}
.carousel-caption {
    position: absolute;
    left: auto;
    right: auto;
    width: 50%;
    height: 100%;
    background-color: #428bca;
    opacity: 0.8
}

Answer 1

You were very close - I added a reference to jquery in your fiddle, but the alignment issues you were facing were resolved by using the bottom and right properties. Float was not the way to go here, since you already had .carousel-caption positioned absolutely, I just added a right:0, and a bottom:0 to your class.

.carousel-caption {
    position: absolute;
    left: auto;
    right: auto;
    width: 50%;
    height: 100%;
    background-color: #428bca;
    opacity: 0.8;
    bottom:0;
    right:0;
}

See the updated Fiddle here https://jsfiddle.net/jy989rkt/4/