Html Question posted in
Some basic documentation can be found here.

I have this HTML. How to make each of the section next to one another?

<div class="sections-div">
    <section class="eachsec">section1</section>
    <section class="eachsec">section2</section>
    <section class="eachsec">section3</section>
</div>

In CSS:

.sections-div {
    display: inline;
}

It is visible like this now.

I want it to appear in the format

"section1                    section2                     section3"

How to solve it using block or inline or inline-block?

TIA

Tags:

2

Answers


  1. 0

    You can use the following CSS for the child tags using inline-block or inline:

    .eachsec {
  display: inline-block;
}

/*.eachsec {
  display: inline;
}*/
    <div class="sections-div">
  <section class="eachsec">section1</section>
  <section class="eachsec">section2</section>
  <section class="eachsec">section3</section>
</div>

    inline: Displays an element as an inline element. Any height and width properties will have no effect.
    inline-block: Displays an element as an inline-level block container. You CAN set height and width values.

    NOTE: Section tag grouped the generic block of related contents. You should avoid using the <section> tag to inline any content.

    Login or Signup to reply.
  2. 0

    hello you an use the display : flex; together with flex-direction : row; .We can also use the grid system layout

    .sections-div {
  display: flex;
  flex-direction: row;
  justify-content:space-between; /* try also justify-content: space-around; */ 
}
    <div class="sections-div">
    <section class="eachsec">section1</section>
    <section class="eachsec">section2</section>
    <section class="eachsec">section3</section>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search