0

I'm using Twitter Bootstrap's media object styling for our user profiles on a social network of sorts. Pretty standard layout: avatar/logo to the left, title and short description to the right (sorry, not enough rep to provide an image, but see jsfiddle below).

Where I'm stuck: I need to include a "follow" button next to the media heading, but I can't figure out how to position it properly to handle a long media heading (the button wraps to the media body).

Suspect I'm heading toward a face-palm moment.

Here's a jsfiddle illustrating both cases.

Here's my HTML:

<div class="row">
  <div class="span8 media top-buffer">
    <div class="row">
        <p class="media-object pull-left span2">
            <img class="img-polaroid" src="160x120.jpg">
        </p>
        <div class="media-body span6">
             <h3 class="media-heading">Some Name<i class="icon-circle addToFoo-yes-org"></i> <button class="addToFoo-org btn btn-flat pull-right"><i class="icon-plus-sign"></i> Add to My Foo</button><br />
            </h3>

            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </div>
    </div>
</div>

Note, this is for a prototype and I'm firmly in the n00b category, so pardon my janky markup (particularly the egregious use of the i element).

Chad Kruse
  • 623
  • 1
  • 8
  • 22

1 Answers1

0

Add a clearfix class to h3.media-heading.

<h3 class="media-heading clearfix">
Ibuprofen
  • 73
  • 3
  • 1
    Open palm, insert face...thanks! For anyone else working with a similar layout, clean it up even more by [attaching the button to the last word in the media heading](http://stackoverflow.com/questions/16246099/attach-font-icon-to-last-word-in-text-string-and-prevent-from-wrapping). – Chad Kruse Apr 29 '13 at 14:52