0

im still learning and html soo bare with me :D can anyone tell me why i have that blank space above the 2nd box? yellowish box? enter image description here

I was hoping that both the boxes come in the same line :O

.lorem1 {
  background-color: cadetblue;
  display: inline-block;
  color: blue;
  padding: 10px;
  border: solid black 1px;
  margin: 10px;
  width: 200px;
  height: 300px;
}

.lorem2 {
  background-color: rgb(231, 139, 0);
  color: yellowgreen;
  display: inline-block;
  padding: 10px;
  border: solid black 1px;
  margin: 10px;
  width: 200px;
  height: 300px;
}

.contact_us {
  color: yellow;
  text-align: center;
  display: inline-block
}
<header>
  <h1>This is a sample layout</h1>
</header>
<main>
  <section class="lorem">
    <div class="lorem1">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas exercitationem earum similique dicta quis ullam. Consequatur incidunt repellendus itaque velit quaerat beatae sapiente, adipisci labore tempore minus culpa natus consectetur.
    </div>
    <div class="lorem2">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quis aut minima, ullam quibusdam ea veritatis veniam, asperiores quasi eos reiciendis quos nemo aliquid vero?
    </div>
  </section>
  <br>
  <br>
  <br>
</main>
<footer>
  <div class="contact_us">
    Link check
  </div>
</footer>

Yeah sorry didnt post the code before :<

InSync
  • 4,851
  • 4
  • 8
  • 30
Alain
  • 1
  • 1
  • 1
    Without the code, nobody could tell. – com.on.ist May 07 '23 at 16:54
  • 1
    A little simpler: add `display: flex` to your `lorem` class in the CSS (and remove the `display` properties from its child containers). – Andy May 07 '23 at 17:18
  • Why inline-block cannot make them horizontal? this is because there is white space between the div elements. – harry May 07 '23 at 17:19

0 Answers0