Here's three quick ways to create title bars like those used for the headings of every blog post on this site. The post title is displayed on the left with the date anchored to the right. Both methods add the date to a SPAN which sits within the heading.
Method 1: Using Absolute Positioning
The first method uses absolute positioning to anchor the SPAN to the right hand side of the heading. The heading is given relative positioning so that the SPAN's top and right properties are applied relative to it rather than the page as a whole. The SPAN's top property needs to match the padding value applied to the heading to ensure the text on both sides lines up vertically.
HTML:
<h2>
Sample Title 1
<span>3 days, 10 hours ago</span>
</h2>
CSS:
h2 { position: relative; background: #ccc; padding: 7px; }
h2 span { position: absolute; top: 7px; right: 7px; }
Method 2: Using Floats
The second method is simpler. The SPAN, containing the date, is simply floated to the right.
HTML:
<h2>
<span>3 days, 10 hours ago</span>
Sample Title 1
</h2>
CSS:
h2 { background: #ccc; padding: 7px; }
h2 span { float: right; }
Method 3: Using Floats (Preserving Source Order)
This third method was added on 22nd October (thanks Norm for the suggestion). It preserves source order by wrapping the title in a SPAN (or EM if your prefer) and floating it left. The date is then anchored to the right hand edge of the title bar by setting text-align: right on the H2.
HTML:
<h2>
<span>Sample Title 1</span>
3 days, 10 hours ago
</h2>
CSS:
h2 { background: #ccc; padding: 7px; text-align: right; }
h2 span { float: left; }
Why not just switch Example 2's float to alleviate the source order concern?
HTML:
Sample Title 1 3 days, 10 hours ago
CSS: h2 { background: #ccc; padding: 7px; } h2 span { float: left; }
You're allowing HTML in the comments? That could be bad...
Speaking of which, this textarea is annoyingly narrow to type in.
Anyway, this is what my source should've looked like:
HTML:
Sample Title 1 3 days, 10 hours ago
CSS: h2 { background: #ccc; padding: 7px; } h2 span { float: left; }
Well, apparently HTML like a PRE tag is NOT allowed. Last try:
HTML: <h2> Sample Title 1 <span>3 days, 10 hours ago</span> </h2>
CSS: h2 { background: #ccc; padding: 7px; } h2 span { float: left; }
Rob - the CSS you suggested won't actually work. The date would be displayed before the title and both would be aligned to the left hand edge of the title bar.
All HTML is stripped from comments before being saved however you can use a subset of the BBCode syntax as described below the comments form.
I agree that the form does need some work. I'll be looking at it shortly.
My preferred method, if the "X days ago" part was supposed to be in the header tag, would be:
<h2><em>Heading</em> 2 days ago</h2> H2 { text-align: right; } H2 EM { float: left; }
This preserves the correct source order, and provides more emphasis to the actual title.
However, personally, I don't think the "X days ago" should in the header in the first place, as it's metadata, not the actual title. So I'd use a div around the header, and float the header left instead.
Hi Norm - thanks for stopping by. Good points. For the benefit of future readers I've put together two more examples to highlight your ideas and updated the article accordingly.
Using text-align: right to preserve source order - View Example 3
Moving the date outside the header - View Example 4
Another example with date outside. Not always usable, but a solution nonetheless.
I want to create page title from my page tag. Please help me to do with asp or css Thanks
I want to place two lines on the right. Just one line on the left and two lines on the right.
chat | Porno izle | sex izle | sicak sohbet Dear Admin, I thank you for this informative article. And I thank you for this I follow your vendors. It’s verry good. I wish you continued success whould you like. sicak chat | sohbet | chat | sohbet siteleri | chat siteleri | sohbetim | sohbet siteleri | This is a great resource for growing your buisness.There are various aspects in buiness management and to grow the business.This is a very useful for tool for young entepreneurs. Thanks You Admin chat siteleri | sohbet odalari | chat odalari - sohbet - sohbet kanalları - chat kanalları - mynet sohbet | Chat Sitesi
Hayata küstüm... good blog
perfect blog thanks