SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2006
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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>
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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".
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ralph
    but the overflow: hidden on the div
    wups, missed that


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •