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.
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:
<!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>
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.