align heading (eg. <h2>) with <hr />

**seannie** · Feb 17, 2013 15:09

i'm having a problem aligning a <hr /> and heading so that they appear on the same level. I know there is probably an easy resolution to this but I'm just stuck at the moment.

I want the h2 to be floated left and the hr to start from the end of the heading and stretch right to the end of its container.

thanks for any help.

**ralph.m** · Feb 17, 2013 15:38

Better not to use a <hr>, because this is only presentational in nature. You could either use a background image on the h2, or some fancy CSS like this:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
	
<style media="all">
div {width: 800px; margin: 0 auto; height: 500px; background: #e7e7e7; padding: 20px; overflow: hidden;}
h2 {position: relative; line-height: 1em; display: inline-block;}
h2:after {
	content:"";
	border-bottom: 2px solid #000;
	position: absolute;	
	margin-top: 0.5em;
	width: 999em;
	left: 110%;
}
</style>
	
</head>

<body>
	<div>
		<h2>A heading</h2>
		<p>Some text some text  some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text</p>
	</div>
</body>
</html>

**Stomme poes** · Feb 18, 2013 02:14

Won't that 999em width cause scrollbars? I know you can absolutely position someone to the left or top offscreen and no scrollbar, but if it extends to the right wouldn't it make one?

Another trick is to have a repeating image as the background of the h2, centered vertically with background-position. Then a span around the text of the h2, who has enough padding on the sides to satisfy and a background colour matching the page background... making it look like the background image (which can be a line, or anything else too) is only starting at the end of the text and continuing on to the edge of the page (since the h2 was already a block and already stretches to 100% its parent's width.

**ralph.m** · Feb 18, 2013 02:32

Originally Posted by Stomme poes

Won't that 999em width cause scrollbars? I know you can absolutely position someone to the left or top offscreen and no scrollbar, but if it extends to the right wouldn't it make one?

The 999em is excessive, of course, but the overflow: hidden on the div stops the right scrolling (at least in my browza).

Another trick is to have a repeating image as the background of the h2 ...

Yeah, much easier, and what I meant by "a background image on the h2".