Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Issue getting element to float within a container with multiple floating elements

Issue getting element to float within a container with multiple floating elements

Problem

I'm having an issue getting the name div and time-ago div to Float properly. For ex, the time-ago div doesn't seem to want to float to the far right. Here's my current HTML / CSS markup:

http://jsfiddle.net/stickboyski/qCWsk/101/

Any idea what's going on?

BTW, I am using SASS for the CSS.

Problem courtesy of: keruilin

Solution

The parent div of the time-ago div, .metadata clearfix has a display of inline-block. That causes its width to only be the size of its contents. You can either change its display property to block as demonstrated in this fork http://jsfiddle.net/maxbeatty/KJUrL/

.metadata {
    display: block; /* to make width 100% of container */ 
    .name {
        float: left;
        display: inline;
    }

    .time-ago {
        float: right;
    }
}
Solution courtesy of: maxedison

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Issue getting element to float within a container with multiple floating elements

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×