Question

fiddle

The title appears overtop of the content above it.

Adding the Twitter’s .clearfix to the container doesn’t seem to solve the problem. I’m not sure how to push my titlebar down below the content above it.

Suggestions?

---

.clearfix reference (from Twitter Bootstrap) — written in less:

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    // Fixes Opera/contenteditable bug:
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}

And use like:

.title-tabs {
  .clearfix;           /* HERE */
  border-bottom: 1px solid #91b6eb;
  position: relative;
  h3 {
    float: left;
    margin: 0;
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
  }
  /* etc... */

Answer 1

Here is probably what you are looking for

http://jsfiddle.net/rUQ2z/2/

    <div class="main-content">
  <div class="container">
    <div class="access-details">
      <div class="pull-left">
        <div>Logged in: <b>John Doe</b>
        </div>
        <div>Access Lvl: Noob</div>
      </div>
      <div class="pull-right">
        <div>Sunday, January 13th, 2013</div>
      </div>
    </div>
    <div class="title-tabs clearfix">
      <h3>Client Details</h3>
      <ul class="nav">
        <li class="active"><a href="#">Details</a>
        </li>
        <li><a href="#">Program</a>
        </li>
        <li><a href="#">Special</a>
        </li>
        <li><a href="#">Docs</a>
        </li>
        <li><a href="#">Notes</a>
        </li>
      </ul>
    </div>
    <p>Welcome to Client Details</p>
  </div>
</div>

h3 {
  font-size: 36px;
}
.clearfix {
  *zoom: 1;
  &:before, &:after {
    display: table;
    content:"";
    // Fixes Opera/contenteditable bug: // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 line-height: 0;
  }
  &:after {
    clear: both;
  }
}
.title-tabs {
  .clearfix;
  border-bottom: 1px solid #91b6eb;
  position: relative;
  h3 {
    float: left;
    margin: 0;
    display: block;
    left: 0;
    bottom: 0;
  }
  ul {
    float: right;
    margin: 0;
    display: block;
    right: 0;
    bottom: 0;
    li {
      float: left;
      a {
        display: block;
        padding: 3px 5px;
        background-color: #f9fafe;
        .border-radius(5px, 0, 0, 5px);
        border-color: #91b6eb;
        border-width: 2px 2px 0 2px;
        border-style: solid;
        text-transform: uppercase;
        font-weight: bold;
      }
    }
    li + li {
      margin-left: -2px;
    }
  }
}

There is no need for position: absolute on the same class that uses float. You either use floats or you use position relative/absolute.

You want to apply clearfix to the container that contains your float which will update the height of your container allowing the content below the clearfix to not overlap with your content above.

EDIT

If you are looking for an alternative answer dealing with dynamic content where you want the menu items to float right and and align bottom then tables is a way to do this.

Take a look at the following code. I made the container be the table, title-tabs be the title-row and I added ul-container so I can make the menu items be contained within a table cell.

http://jsfiddle.net/rUQ2z/11/

<div class="main-content">
  <div class="container">
    <div class="access-details">
      <div class="pull-left">
        <div>Logged in: <b>John Doe</b>
        </div>
        <div>Access Lvl: Noob</div>
      </div>
      <div class="pull-right">
        <div>Sunday, January 13th, 2013</div>
      </div>
    </div>
    <div class="title-tabs">
      <h3>Client Details</h3>
      <div class="ul-container">
      <ul class="nav">
        <li class="active"><a href="#">Details</a>
        </li>
        <li><a href="#">Program</a>
        </li>
        <li><a href="#">Special</a>
        </li>
        <li><a href="#">Docs</a>
        </li>
        <li><a href="#">Notes</a>
        </li>
      </ul>
      </div>
    </div>
    <p>Welcome to Client Details</p>
  </div>
</div>

h3 {
  font-size: 36px;
}
.clearfix {
  *zoom: 1;
  &:before, &:after {
    display: table;
    content:"";
    // Fixes Opera/contenteditable bug: // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 line-height: 0;
  }
  &:after {
    clear: both;
  }
}
.container {
  display: table;
  width: 100%;
}

.title-tabs {
  .clearfix;
  display: table-row;
  border-bottom: 1px solid #91b6eb;
  position: relative;
  h3 {
    margin: 0;
    vertical-align: bottom;
    display: table-cell;
    left: 0;
    bottom: 0;
  }
  .ul-container {
     display: table-cell;
    text-align: right;
    vertical-align: bottom;
  }

  ul {
    margin: 0;
    display: inline-block;
    right: 0;
    bottom: 0;
    li {
      float: left;
      a {
        display: block;
        padding: 3px 5px;
        background-color: #f9fafe;
        .border-radius(5px, 0, 0, 5px);
        border-color: #91b6eb;
        border-width: 2px 2px 0 2px;
        border-style: solid;
        text-transform: uppercase;
        font-weight: bold;
      }
    }
    li + li {
      margin-left: -2px;
    }
  }
}