How can I have a H2 and a HR tag in-line without using bad practice?

Question

so I want to make a HR and a H2 element display on the same line, so that it looks like this:

http://gyazo.com/7943d8d8b6d23ebffc80a60c0acc872f

But it looks like this:

http://gyazo.com/30f80e33d627e7bbedf56565afbd5509

And here is the code:

hr {
display:inline-block;
width:60%;
float:right;
margin-right:20px;
height:5px;
background-color:#FFFFFF;
}

<h2 class="minecrafter" style="padding-left:10px;padding-top:10px;letter-spacing:3px;">Miners Union</h2> <hr>

Now I know I can easily fix this by having the HR tag infront of the H2 tag, but I know that this is bad practice and I don't think it will work in xHTML.

Thank you for reading and any replies :)

Edited to correct typo as pointed out

It seems there was a typo but it hasn't fixed it after changing, but thanks for pointing that one out! — , Apr 21 '15 at 19:21
Those links tell me I have to download something. Stackoverflow supports images. Use them please. — Jonathan Wood, Apr 21 '15 at 19:28
Why would having the HR before the H2 be bad practice? On the contrary, since the headline will presumably have content after it that it is the headline for, having the HR _between_ the headline and that following content would make _less_ sense, than having it the other way around. And why wouldn’t that “work” in XHTML? Your whole “reasoning” seems to be based purely on guessing, and not any kind of noteworthy knowledge about the topic. — CBroe, Apr 21 '15 at 19:30
@Jonathon Wood, you don't have to download anything. Its just a url to a picture. — , Apr 21 '15 at 19:36
@CBroe please forgive me, when it comes to web design I am a beginner. in XHTML I thought it had to be much cleaner to not come up with arrows, as the tags have to be in the right order etc. I have researched this before and a lot of places said it was bad practice. — , Apr 21 '15 at 19:39
@TobiasYeomans That is a quirk with `
`s. You have to set both the background color and the border color, or it will look different in the varioous browsers. For example, Chrome requires the border color, while IE uses the background and Firefox uses both. — Ismael Miguel, Apr 21 '15 at 20:10
hello, maybe a background image or gradient could help, so could be display:flex exemple of the idea: http://codepen.io/gc-nomade/pen/pJojXa this could work if you do not support IE8 for instance. — G-Cyrillus, Apr 21 '15 at 20:12

score 4 · Accepted Answer · answered Apr 21 '15 at 19:28

4

You could use :after element like this: fiddle

h2:after {
    content: '';
    display: inline-block;
    height: 3px;
    background: red;
    width: 60%;
    float: right;
    margin-top: 15px;
}

answered Apr 21 '15 at 19:28

fcastillo

938
1
11
24

Also works, but it will complicate a lot of issues with other h2 tags and divs which I will have to sort out so I went for the easier option below, but still thanks! – Apr 21 '15 at 19:44
Ok, try this `h2.minecrafter:after` – fcastillo Apr 21 '15 at 19:45
What is the :after element? – Apr 21 '15 at 19:49
Inserts content after the selected [CSS ::after Selector](http://www.w3schools.com/cssref/sel_after.asp) – fcastillo Apr 21 '15 at 19:51
And here it's an example if you need to use
tag [fiddle](http://fiddle.jshell.net/psfvLk93/) but you need to put
in your
tag
– fcastillo Apr 21 '15 at 19:54
Ohh makes sense, is there any benefits to using this instead of just putting display:inline-block; in both the h2 and hr? – Apr 21 '15 at 19:54
Yes, it make that you use less HTML and the load time of the site will be less and your code will be more clean (very important for me :) ) – fcastillo Apr 21 '15 at 19:56

score 0 · Answer 2 · answered Apr 21 '15 at 19:30

0

You can accomplish this by changing your css to:

hr, .minecrafter {
    display: inline-block;
}

hr {
    width: 60%;
}

Hope this helps.

answered Apr 21 '15 at 19:30

Anthony

1,439
1
19
36

I added display:inline-block; to the style=" " on the h2 tag as to not complicate issues with other h2 tags using class.minecrafter. Works fine. Thanks! – Apr 21 '15 at 19:43

score 0 · Answer 3 · answered Apr 21 '15 at 19:48

0

I would do something like this:

<h2 class="minecrafter"><span>Miners Union</span><hr /></h2>

body {
    background: #444;
    color: #fff;
}
h2 {
    padding-left: 10px;
    padding-top: 10px;
    letter-spacing: 3px;
    overflow: hidden;
}
h2 span {
    float: left;
    margin-right: 20px;
}
h2 hr {
    border: 0;
    background: #fff;
    height: 4px;
}

A :after approach would be a "cleaner" way to do it, however.

https://jsfiddle.net/0sh4a1wL/2/

answered Apr 21 '15 at 19:48

veksen

6,863
5
20
33

1

you cannot insert hr in h2, but a pseudo element would do indeed : https://jsfiddle.net/0sh4a1wL/3/ – G-Cyrillus Apr 21 '15 at 20:16
@GCyrillus exactly what should be done, I messed with `:after`, and I was missing the `overflow: hidden` – veksen Apr 21 '15 at 20:22

How can I have a H2 and a HR tag in-line without using bad practice?

3 Answers3

tag