HTML Align DIV Children Horizontally

Question

I am very new in HTML and CSS development. I wanted all children in my div parent align horizontally

My HTML :

<div class="parent">
        <h1>Hello</h1>
        <h1>World</h1>
</div>

I tried using inline-block on .parent like the others suggested but still the output is :

Hello
World

instead

Hello World

any ideas?

Answer 1

The property you're looking for is display: inline; this will make each tag render like it is "inline with each other".

.parent h1 {
    display: inline;
}

You could also float the tags, but I would avoid doing that as it would break the flow of text if you were to add any other tags within the .parent container.

Example JSfiddle

Answer 2

Consider looking at float:left.

.parent h1 {
    float:left;
}

<div class="parent">
    <h1>Hello</h1>
    <h1>World</h1>
</div>

Or even display:inline

.parent h1{
  display:inline;
  }

<div class="parent">
  <h1>Hello</h1>
  <h1>World</h1>
</div>

Keep in mind that using float is not recommended here because if you add a new element to the .parent div it will appear next to the h1 elements because those are floating left. +1 to @MathiasaurusRex for pointing that out.

Answer 3

You dont need to align the div, but need to align the h1's: In your CSS code add:

h1 { display: inline; } Fiddle here

Answer 4

Another approach is as follows:

.parent {
    display: flex;
    flex-direction: row;
}

<div class="parent">
    <h1>Hello</h1>
    <h1>World</h1>
</div>