posted on:September 16, 2007
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.
<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.
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:
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.
Enjoyed the article?
Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.
Comments (17 Comments)
Sorry, the comment form is closed at this time.