CODEWITHSUNDEEP
jqueryhtmlcss
Nicolas
Nicolas

Reputation: 1143

HTML Elements Not On Same Line

I know this question is asked a TON on here but I feel like with this particular question the solution varies significantly depending on the elements surrounding CSS.

Anyways, I have a piece of jQuery here:

$(".classDiv").append("<h4>"+name+"</h4> - <h5>"+teacher+"</h5>");

And my HTML/CSS:

<div class="classDiv" style="margin-top: 100px;"></div>

.classDiv {
    margin: 0 0 20px; 
    padding: 5px 0 0; 
    border: 1px solid #d8d8d8; 
    background: #f9f9f9;     
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
    -moz-box-shadow: inset 0 0 0 1px #fff;
    -webkit-box-shadow: inset 0 0 0 1px #fff;
    box-shadow: inset 0 0 0 1px #fff; 
}

I would like both of my name and teacher text to be on the same line. I have tried things such as a surrounding div with display: inline-block: but it doesn't seem to work.

Here is what is happening:

enter image description here

Upvotes: 0

Views: 555

Answers (3)

Josh KG
Josh KG

Reputation: 5140

Header elements like h4 and h5 have a display of block by default. Block level elements stack on top of each other, as opposed to inline elements, which stack next to each other in the page flow. If you change your CSS to make the h4 and h5 each into inline elements, they'll sit next to each other:

.classDiv h4, .classDiv h5 {
    display: inline; /* or inline-block would work too */
}

Upvotes: 0

DonKoko
DonKoko

Reputation: 115

I would suggest using something different than h4 and h5. Do the same but use span instead
$(".classDiv").append("<span class="my-name">"+name+"</span> - <span class="teacher">"+teacher+"</span>");

If you want to style them just give them classes and play with css font properties.


Gl and enjoy

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324610

The use of <h4> and <h5> is totally inappropriate here.

Use <span>s, with a class to style them bigger if you want.

Upvotes: 1

Related Questions