How to clearfix absolutely positioned elements? - html

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">Details
</li>
<li>Program
</li>
<li>Special
</li>
<li>Docs
</li>
<li>Notes
</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">Details
</li>
<li>Program
</li>
<li>Special
</li>
<li>Docs
</li>
<li>Notes
</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;
}
}
}

Answer 2

What happened is that your .title-tabs was set to relative, and h3 set to absolute and bottom, because you the .title-tabs do not have a height, so the h3 element will take the last bottom and goes out of the .title-tabs line. Remove bottom from h3 css.