How do I make HTML Elements appear on one line?

Question

I want to have the H3 and P tags on the same line in pairs. I do not want to use the tag <table>.

HTML:

<h2>SERVERS:</h2>
<!--I want each set of H3 and P to be on the same line-->
<h3>Server 1 Status:</h3><p id="running">Running</p>
<h3>Server 2 Status:</h3><p id="notRunning">Not Running</p>
<h3>Server 3 Status:</h3><p id="running">Running</p>

CSS:

#running {
    color:green;
    font-weight:bold;
}
#notRunning {
    color:red;
    font-weight:bold;
}

I have been searching all over the place and most of the posts are either with the <table> tag or very old and don't work.

I mean the same id. You use `id="running"` twice, that is not allowed in HTML. — cezar, Jun 17 '15 at 07:34
@JeddDryden You can but you really shouldn't, `id`s should be unique http://www.w3.org/TR/html401/struct/global.html#adef-id. Using the same `id` can cause problems, in this case `class` would be more appropriate. — Hidden Hobbes, Jun 17 '15 at 07:35
You can use a class in CSS with preceding dot: `.running { attribute: value; }`. In HTML you just declare it like this: `
`. And also don't use snake case in CSS. CSS is not case-sensitive and capital letters in your ids and classes don't make a lot of sense. It is better to write `
` and in CSS `#not-runing { }`. — cezar, Jun 17 '15 at 07:51
Regarding my previous comment I made a faux pas. It meant camel case and not snake case. Using a camel case isn't a best practice in HTML and CSS. — cezar, Jun 17 '15 at 08:28

score 2 · Accepted Answer · answered Jun 17 '15 at 06:39

2

Use display:inline

h3,p{
display:inline;
}

answered Jun 17 '15 at 06:39

gopalraju

2,299
1
12
15

score 1 · Answer 2 · edited May 23 '17 at 11:58

1

Use display: inline:

h3, p {
    display: inline;
}

See https://stackoverflow.com/a/14033814/5011843 for a good comparison of display options.

edited May 23 '17 at 11:58

Community

1
1

answered Jun 17 '15 at 06:41

Lukas W

305
1
9

score 1 · Answer 3 · answered Jun 17 '15 at 06:41

1

use css like this, DEMO

h3,p {

display:inline;
}

answered Jun 17 '15 at 06:41

pcs

1,864
4
25
49

G.L.P · Answer 4 · 2015-06-17T06:50:25.840

1

Try like this: Demo

p,h3{
display:inline-block;
}

Edit: Demo

In your code there is a typo in this class

#notRunning {        
    font-weight:bold;
}

For next line, you can use clear or <br/> according to your requirement

.clear {
    clear:both;
    height:0;
}

edited Jun 17 '15 at 06:50

answered Jun 17 '15 at 06:41

G.L.P

7,119
5
25
41

score 1 · Answer 5 · answered Jun 17 '15 at 06:41

1

You need to add css:

h3,p{
  display:inline;
}

and for each line add a <br /> tag to it

Demo

answered Jun 17 '15 at 06:41

Vincent1989

1,593
2
13
25

score 1 · Answer 6 · answered Jun 17 '15 at 06:47

Edited code:

<h2>SERVERS:</h2>
    <!--I want each set of H3 and P to be on the same line-->
    <h3>Server 1 Status:</h3><p class="running">Running</p>
    <h3>Server 2 Status:</h3><p class="notRunning">Not Running</p>
    <h3>Server 3 Status:</h3><p class="running">Running</p>

Change "id" into class so it could be more specific and it won't apply to all your webpage, just the running and notRunning. CSS:

h3,p.running,p.notRunning {
display:inline;
}

cezar · Answer 7 · 2015-06-17T07:35:44.700

Here is my solution which lines them pairwise:

#running {
    color: green;
    font-weight: bold;
}

#notRunning {
    color: red;
    font-weight: bold;
}

h3, p {
    display: inline;
}

h3::after {
    content: " ";
}

p::after {
    content: "";
    display: block;
    margin: 1em;
}

The assumption is that I can't access the HTML and have to do everything in CSS. The line display: inline just puts all headings and paragraphs on one line. With the pseudoselector ::after we achieve some space in each pair and between the pairs vertically, and the line display: block takes care for a newline after every paragraph, thus putting every pair on single line.

And here is the fiddle: http://jsfiddle.net/ucLmhx7t/1/

How do I make HTML Elements appear on one line?

7 Answers7