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

Html – Inline block elements not lining up horizontally side by side

I’m not quite why the two blocks below (section.structure and section.specificity) are not lining up. When I reduce the width (past a certain number, not sure exactly what number this is) they line up.

I need the width around 500px (or each block taking up approximately half the width of the screen) but when I do this they stack on top of each other. Any ideas?

HTML

<main>
      <section class= "structure">

      </section>

      <section class= "specificity">

      </section>

CSS

section.structure {
    border-radius: 20px;
    height: 500px;
    width: 500px;
    background-color: rgb(255, 255, 255);
    margin: 10px;
    border: rgb(245,245, 245);
    display: inline-block;
}

section.specificity {
    border-radius: 20px;
    height: 500px;
    width: 500px;
    background-color: rgb(255, 255, 255);
    margin: 10px;
    border: rgb(245,245, 245);
    display: inline-block;
}

Changing width measurements, vertical-align. No change.

Tags:

2

Answers


  1. 0

    If you are not restricted to using display: inline-block you can use flexbox.
    If you need to create space between the two elements you can use the gap property. Also I’d advise against setting fixed height and width in pixels as you can have problems with the layout being responsive
    HTML:

    main {
  display: flex;
}

section {
  border: 1px solid red;
  width: 50%;
  height: 100vh;
}
    <main>
 <section class="structure">hi</section>
  <section class="specificity">hello</section>
</main>
    Login or Signup to reply.
  2. 0

    How about something like this? It also uses flexbox like the previous answer. I use https://suiq.jp/flex-layout-generator/ for reference.

    main {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}

section.structure {
  border-radius: 20px;
  background-color: pink;
  margin: 10px;
  border: rgb(245, 245, 245);
}

section.specificity {
  border-radius: 20px;
  background-color: lightblue;
  margin: 10px;
  border: rgb(245, 245, 245);
}

section {
  width: 500px;
  height: 100vh;
}
    <main>
  <section class="structure">
    test
  </section>

  <section class="specificity">
    test
  </section>
</main>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search