Display: inline-block problem

HTML-CSS
1

I want to position the two boxes so that they’re next to each other but not underneath. Could someone help me out with this?

2

Two Boxes? I assume your in CSS?

3

Your goning to have to specify in CSS for starters.
If you could post the code you have that would be nice. :sunglasses:

4 
<div class="box1">

</div>

<div class="box1">
  
</div>


.box1
{
  position: relative;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  display: inline-block;
  width: 30%;
  height: 10%;
  border: 1px solid black;
  padding: 10%;
  margin: 1%;
}
5

You need to use float left but code pen is not responding.
Anyway try to remove the html code and see what happens.GL

6

Why not just use flexbox, give them a flexbox container.

BTW, all the flexbox properties you have on the elements are not going to work without display flex. But if the boxes are flex items and not flex containers, the flex styles do not do anything.

<div class="flex">
  <div class="box1"></div>
  <div class="box1"></div>
</div>

.flex {
  display: flex;
}

Add box-sizing: border-box to your CSS

* {
  box-sizing: border-box;
}

If you want to use inline-block for layout grids you have to account for the box model, margin, border, and the whitespace (i.e. two 50% wide elements sitting next to each other).

7

Hi @krys98

Another option, with not so much css, is to nest the div elements in a table element.

Happy coding

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.