1

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!

i_trope
  • 1,554
  • 2
  • 22
  • 42

2 Answers2

3

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.

Community
  • 1
  • 1
Etheryte
  • 24,589
  • 11
  • 71
  • 116
0

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.

jakealbaugh
  • 256
  • 1
  • 7