Floater

written on:16 Sep, 2007 by Alen Grakalic

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 with large experience in all types of front-end work. Started to get involved with web in 1999. and turned freelance in 2005., the same year he started Css Globe. Alen's work has been featured on numerous css galleries including famous Css Zen Garden official list. Available for contract work.

Enjoyed the article?

Subscribe to our RSS feed or share it with your friends.

Comments

Marko on 17 Sep, 2007 wrote:

Nice, will some handy.
Stuart on 17 Sep, 2007 wrote:

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.
david b on 17 Sep, 2007 wrote:

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

@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.
Fredrik Wärnsberg on 17 Sep, 2007 wrote:

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

@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.
Fredrik Wärnsberg on 17 Sep, 2007 wrote:

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 element, I suppose).
Fredrik Wärnsberg on 17 Sep, 2007 wrote:

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

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

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!
PiticStyle on 21 Sep, 2007 wrote:

Thank you!
myaleigh on 26 Sep, 2007 wrote:

Interesting. I'll definitely try this next time around. Thanks!
Reynder on 2 Oct, 2007 wrote:

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

tomo on 4 Oct, 2007 wrote:

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...
Dejan on 3 Jan, 2008 wrote:

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

hi it is nice and im hanging up here from afghanistan
SEO Bedrijven on 28 Apr, 2008 wrote:

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