posted on:September 16, 2007

Floater



examples

Here’s a simple little trick on how to have make secondary content float to the right of the title. You can use this for variety of purposes like put an icon to rss feed or link to full article. View example page to get an idea :).

Why should this make any sense?

Usually when putting floated content, developers put it BEFORE the element in the flow. i.e. images before paragraphs. When it comes to titles (and we all use heading tags for that right? ūüôā ) the situation is a tiny bit different. Title should represent the beginning of the section and anything related to it should come AFTER it in the markup structure. So "click for full story" links should be below the title not above it.

Markup and CSS

So, the markup should look like this.


<h2>Blog post</h2>
<p class="floater"><a href="#">more...</a></p>
<p>blog summary text</p>

In this example I am using a link to full article next to a blog post title. Sure, it would make more sense to put a link to full story after summary, but we are trying to achieve certain effect, and this trick can be used for different things.
Ok, so here goes… The trick is add float:right and apply negative top margin to the floater. That will move it to the right and to the top in the title area.


.floater {
margin:0;
float:right;
margin-top:-3em;}

The value of negative top margin depends on title height and floater content height so you’ll need to adjust that.
To make it bulletproof use fixed values like:


h2 {
height:24px;
line-height:24px;}

.floater {
margin:0;
float:right;
margin-top:-24px;
height:24px;
line-height:24px;}

Since we removed floater from the flow, any content that comes after it acts like it comes directly after the title. This is merely the basis. Depending on other elements, like title length, you will have to make adjustments so the elements don’t interfere with each other.

Examples

I suggest to look at the examples to see where I am getting at with this. Download them and apply to your designs.

View examples | Download

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

DeliciousStumbleUpon RedditSubscribe

Comments (17 Comments)

  1. Marko
    September 17, 2007

    Nice, will some handy.
  2. Stuart
    September 17, 2007

    I like this example and this is something I have used many time. There is one point to take note of and that is the graceful degradation of the headers with background colours. This is really only an issue in the following browsers Mozilla Firefox and Safari. What happens is that the text bounds outside of the box because of its fixed height. Setting the margins to 0 and using top and bottom padding will fix the cross browser issue.
  3. david b
    September 17, 2007

    hmmm interesting wayof doing it, i usually float the header left and the float the other stuff right and then clear the next content.
  4. cssglobe
    September 17, 2007

    @Stuart: it all depends on your content really. If you don't have control over your title lengths go with flexible solution. I almost always use ems with this, but I wanted to demonstrate pixel precise solution.
  5. Fredrik Wärnsberg
    September 17, 2007

    In those situations I pretty much always resort to relative absolute positioning. But I guess some negative margins could do the trick as well.
  6. cssglobe
    September 17, 2007

    @Frederik: Also a way to go. I use a lot of absolute positioning myself, but imagine having variable height title and trying to put content on a baseline.
  7. Fredrik Wärnsberg
    September 17, 2007

    Well I suppose that depends where you want to align the symbols to? If it's on the title's first line it shouldn't be a problem. I guess you also could use percentages if you want it to scale correctly (which would require you to wrap the elements in the <h> element, I suppose).
  8. Fredrik Wärnsberg
    September 17, 2007

    But you do make a very valid point. (sorry for the double comment, feel free to move this bit up to the last comment).
  9. cssglobe
    September 17, 2007

    As you said it all depends on the goal... there are many ways to skin a cat :)
  10. Katie
    September 21, 2007

    I also pretty much always resort to relative absolute positioning, but I can totally see using this method when there's a variable height title and you're trying to put content on a baseline. I'll definitely use this in the future!
  11. PiticStyle
    September 21, 2007

    Thank you!
  12. myaleigh
    September 26, 2007

    Interesting. I'll definitely try this next time around. Thanks!
  13. Reynder
    October 2, 2007

    Why do you use a <p> to place an <a>? Why not use the <a> to place it's self?
  14. tomo
    October 4, 2007

    It would be nice, though, to put some padding to the heading, so that headings with a lot of text wont go over the floater...
  15. Dejan
    January 3, 2008

    or simply add it after content in some let's say span and you don't have to use that - margin
  16. ghasem
    February 16, 2008

    hi it is nice and im hanging up here from afghanistan
  17. SEO Bedrijven
    April 28, 2008

    Never used this trick before. Works like a charm. Bookmarked it for the team.

Sorry, the comment form is closed at this time.