CODEWITHSUNDEEP
htmlcss
Gusti Arya
Gusti Arya

Reputation: 1301

HTML Align DIV Children Horizontally

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?

Upvotes: 12

Views: 26202

Answers (5)

Dainank
Dainank

Reputation: 2491

Another approach is as follows:

.parent {
    display: flex;
    flex-direction: row;
}
<div class="parent">
    <h1>Hello</h1>
    <h1>World</h1>
</div>

Upvotes: 4

Michael Gomes
Michael Gomes

Reputation: 43

One thing to note here is your choice of tags h1 for children is wrong, headers inserts an empty line before and after the header. As your motive is only to show some text header tag is not the right tag of choice.

Upvotes: -2

Rizky Fakkel
Rizky Fakkel

Reputation: 9183

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.

Upvotes: 4

msm.oliveira
msm.oliveira

Reputation: 211

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

h1 { display: inline; } Fiddle here

Upvotes: 2

Mathias Rechtzigel
Mathias Rechtzigel

Reputation: 3604

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

Upvotes: 16

Related Questions