CSS: Aligning divs 2 on a line without using float

Question

I am trying to avoid using float. When I lower the width to 49%, they sit side by side but unevenly. When I raise the width to 50%, each div sits on it's own line so I'm not sure why.

body {
    margin: 0px;
    padding: 0px;
}
div {
    min-height: 50vh;
    width: 50%;
    display: inline-block;
}
div:nth-child(1) {
    background-color: red;
}
div:nth-child(2) {
    background-color: green;
}
div:nth-child(3) {
    background-color: blue;
}
div:nth-child(4) {
    background-color: yellow;
}

<div>Red</div>
<div>Green</div>
<div>Blue</div>
<div>Yellow</div>

If you put your divs all inline your code will works.
Red
Green
Blue
Yellow — Heichou, Jan 18 '19 at 21:45

score 0 · Answer 1 · answered Jan 18 '19 at 21:37

0

Because inline-block respect space character, in this case, each element puts a "character" space between the divs. Do avoid this there are some tricks but I suggest you to use css grid:

body {
 display: grid;
 grid-template-columns: 1fr 1fr;
}

answered Jan 18 '19 at 21:37

Walker Leite

223
1
7

CSS Grid would be better for more complex two-dimensional layouts though, this is a really simple one-dimensional layout, although it can definitely be done with Grid – IvanS95 Jan 18 '19 at 21:40
grid still has some issues - i would recommend flex-box instead - allthough your solution would probably work in most cases – MaZoli Jan 18 '19 at 21:41

score 0 · Answer 2 · answered Jan 18 '19 at 21:41

display: inline; and display: inline-block uses text spacing as opposed to display: block which will position items more precisely.

By moving the divs to a single line, this forces the divs to have zero space in between them.

See this article for more information.

body {
    margin: 0px;
    padding: 0px;
}
div {
    min-height: 50vh;
    width: 50%;
    display: inline-block;
}
div:nth-child(1) {
    background-color: red;
}
div:nth-child(2) {
    background-color: green;
}
div:nth-child(3) {
    background-color: blue;
}
div:nth-child(4) {
    background-color: yellow;
}

<div>Red</div><div>Green</div><div>Blue</div><div>Yellow</div>

score -1 · Answer 3 · answered Jan 18 '19 at 21:33

-1

You should use flexbox.

you would need to wrap your divs in another div width the class="container"

then you could do this

   .container {
      display: flex;           /* display side by side */
      align-items: center;     /* align vertically */
    }
    .container > * {
      flex: 1; 
    }

answered Jan 18 '19 at 21:33

MaZoli

1,388
1
11
17

I’d rather not use flex-box...trying to accomplish with width and inline-block – Rayy Jan 18 '19 at 21:36
flex-box is state of the art. inline-block is kind off a css hack. – MaZoli Jan 18 '19 at 21:37
you can still achieve what you want to achieve by not having any spaces or tabs between your divs. you need to write them right next to each other. inline-block interprets the space as a real space and causes your trouble. – MaZoli Jan 18 '19 at 21:38

score -1 · Answer 4 · answered Jan 18 '19 at 21:40

-1

If you need to use inline-block make sure you write your html without any spaces.

this does not work:

<div>Red</div>
<div>Green</div>
<div>Blue</div>
<div>Yellow</div>

this does work:

<div>Red</div><div>Green</div><div>Blue</div><div>Yellow</div>

answered Jan 18 '19 at 21:40

MaZoli

1,388
1
11
17

I never new this. I didn’t think placing on a new line mattered. Thank you – Rayy Jan 18 '19 at 21:46
yeah thats the only case where it matters as far as I know. It would be awesome If you could mark my answer as a valid solution. – MaZoli Jan 18 '19 at 21:47

CSS: Aligning divs 2 on a line without using float

4 Answers4