written on:16 Sep, 2007 by Alen Grakalic

Floater

Delicious StumbleUpon Reddit Subscribe

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

About the author

cssglobe's image

Designer, developer and a passionate standardista. Long time web professional with huge experience in all types of front-end work. Founder of Css Globe and creator of Easy front-end framework.
To get in touch, visit Alen's personal page, follow Alen on Twitter or become a Facebook friend.

Enjoyed the article?

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

Delicious StumbleUpon Reddit Subscribe

Read more! Here are our most recent articles:

View All Articles

Comments

  1. Marko 17 Sep, 2007

    Nice, will some handy.

  2. Stuart 17 Sep, 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 17 Sep, 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 17 Sep, 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 17 Sep, 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 17 Sep, 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 17 Sep, 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 17 Sep, 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 17 Sep, 2007

    As you said it all depends on the goal... there are many ways to skin a cat :)

  10. Katie 21 Sep, 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 21 Sep, 2007

    Thank you!

  12. myaleigh 26 Sep, 2007

    Interesting. I'll definitely try this next time around. Thanks!

  13. Reynder 2 Oct, 2007

    Why do you use a <p> to place an <a>? Why not use the <a> to place it's self?

  14. tomo 4 Oct, 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 3 Jan, 2008

    or simply add it after content in some let's say span and you don't have to use that - margin

  16. ghasem 16 Feb, 2008

    hi it is nice and im hanging up here from afghanistan

  17. SEO Bedrijven 28 Apr, 2008

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

Sorry, further comments are disabled for this post.

CSS Globe is a web design magazine brought to you by Alen Grakalic and kept fresh with member contributed news and exlusive articles.

CSSG Ads

Useful Links

Friends