CODEWITHSUNDEEP
htmlcssalignment
Jedd Dryden
Jedd Dryden

Reputation: 23

How do I make HTML Elements appear on one line?

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.

Upvotes: 0

Views: 5681

Answers (7)

cezar
cezar

Reputation: 12032

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/

Upvotes: 1

G.L.P
G.L.P

Reputation: 7217

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;
}

Upvotes: 1

Ali Bdeir
Ali Bdeir

Reputation: 4375

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;
}

Upvotes: 1

Vincent1989
Vincent1989

Reputation: 1657

You need to add css:

h3,p{
  display:inline;
}

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

Demo

Upvotes: 1

pcs
pcs

Reputation: 1854

use css like this, DEMO

h3,p {

display:inline;
}

Upvotes: 1

Lukas W
Lukas W

Reputation: 305

Use display: inline:

h3, p {
    display: inline;
}

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

Upvotes: 1

gopalraju
gopalraju

Reputation: 2309

Use display:inline

h3,p{
display:inline;
}

Upvotes: 3

Related Questions