Question

I know the title doesn’t make sense but I don’t know how to put it.

Take a look at this: http://jsfiddle.net/nr33k/embedded/result/

I want to increase the height of the well on the right to match the height of the two wells on the left together, so it looks like I have three small wells in one large rectangle. If I try to increase the height the obvious way by adding height:150px it causes the bottom well on the left to fall down. How do I solve this?

Answer 1

The issue is that the first two ”wells” are in a row, while the third is in another row.

Try this:

<div class="row">
  <div class="span4">
    <div class="well well-small" style="height:50px">
      <p>hello</p>
    </div>
    <div class="well well-small" style="height:100px">
      <p>hello again</p>
    </div>
  </div>
  <div class="span8">
    <div class="well well-small" style="height:190px;">
      <p>hello one more time</p>
    </div>
  </div>
</div>