CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
i_trope
i_trope

Reputation: 1604

Place divs side by side in twitter bootstrap carousel

I have a twitter bootstrap carousel with one item in it div with id="world_recipes". Within that item are two divs that I would like to place side by side div class="description" and div class="proj_image". I tried applying float: left; to the child divs but that did not work.

<div id="my_carousel" class="carousel slide"><!-- class of slide for animation -->
          <div class="carousel-inner">
            <div id="world_recipes" class="item active"><!-- class of active since it's the first item -->
              <div class="description">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
              </div>

              <div class="proj_image">
                <img src="http://placesheen.com/400/200">
              </div>

              <div class="carousel-caption">
                <p>Caption text here</p>
              </div>
            </div>
          </div><!-- /.carousel-inner -->
          <!--  Next and Previous controls below -->
          <a class="carousel-control left" href="#my_carousel" data-slide="prev">&lsaquo;</a>
          <a class="carousel-control right" href="#my_carousel" data-slide="next">&rsaquo;</a>
        </div>

Thanks!

Upvotes: 1

Views: 3666

Answers (2)

Etheryte
Etheryte

Reputation: 25310

You can easily solve this by using inline positioning.

.description, .proj_image {
    display: inline-block;
    width: 50%;
}

Note however that this solution requires a change to your DOM, as per Css - two inline-block, width 50% elements don't stack. The two blocks that you're inlining can't have whitespaces between them, as inline-block leaves that intact leading to undesired positioning of elements.

See this Jsfiddle for a working sample.

Upvotes: 3

jakealbaugh
jakealbaugh

Reputation: 246

Try wrapping the two child divs in a parent div that has a class of clearfix, make one float: left; and the other float: right;, and give both of them percentage-based widths that add up to 100.

Upvotes: 0

Related Questions