how to make divs inline-block?

Question

I have following html

<div class="main-conteiner">
    <div class="block">First</div>
    <div class="block">Second</div>
</div>

And this css

.main-conteiner {
  width: 600px;
  margin: 0 auto;
}

.block {
  width: 50%;
  display: inline-block;
  background: red;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-box-sizing: border-box; 
}

div {
  margin: 0;
  padding: 0;
}

I need to arrange both divs in a same line. But instead of that it brakes down into two lines. I cant figure out where I've done a mistake.

DEMO

possible duplicate of [A Space between Inline-Block List Items](http://stackoverflow.com/questions/5256533/a-space-between-inline-block-list-items) — Paulie_D, May 02 '14 at 10:04

score 2 · Answer 1 · answered May 02 '14 at 10:07

Demo Fiddle

Its because inline-block takes into account white space in your HTML, simply remove the line break between the two elements.

Revised HTML

    <div class="main-conteiner">
        <div class="block">this is just a div</div><div class="block">this is another div</div>
    </div>

The reason being that inline elements are taken into account effectively in the same way as text, a new line/line break separation will always be rendered as a white space- which in addition to 2*50% will bring the width to greater than 100%.

Alternative Solution

To stop the linebreak in your HTML being rendered as an additional space, simply set font-size on the container to 0, then set font-size for the child div, this will mean the rendered space has a size of zero, thus no width, so will not compromise the width calculations.

.main-conteiner {
    width: 600px;
    margin: 0 auto;
    font-size:0;
}
.block {
    width: 50%;
    display: inline-block;
    background: red;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-size:15px;
}
div {
    margin: 0;
    padding: 0;
}

score 1 · Answer 2 · answered May 02 '14 at 10:08

When you use display:inline-block, you should know and remenber that any space in HTML in between tags will be rendered as white-space. like in between two words.

One easy way to avoid yhis is to bring together closing and opening brackets of tags. DEMO

<div class="main-conteiner">
        <div class="block">this is just a div</div><div class="block">this is another div</div>
    </div>

or insert a comment in between

<div class="main-conteiner">
        <div class="block">this is just a div</div><!--
         --><div class="block">this is another div</div>
    </div>

score 0 · Answer 3 · edited May 02 '14 at 10:10

0

Use this CSS :

.block {
  width: 50%;
  display: block;
  background: red;
  float:left;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

edited May 02 '14 at 10:10

Albzi

15,431
6
46
63

answered May 02 '14 at 10:02

Jérôme

292
1
6

i need to learn how to use inline-block to achive this. Thanks for the answer :) – Prasanga May 02 '14 at 10:03
Ok, so just use float:left; you can keep your display: inline-block – Jérôme May 02 '14 at 11:16

score 0 · Answer 4 · edited May 02 '14 at 10:10

0

If you want both the divs which have a class of .block to be on same line then just use a float

.block {
  float:left;
  width: 50%;
  display: inline-block;
  background: red;  
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-box-sizing: border-box; 
}

edited May 02 '14 at 10:10

Albzi

15,431
6
46
63

answered May 02 '14 at 10:04

ashishmaurya

1,196
10
18

score 0 · Answer 5 · edited May 02 '14 at 10:13

0

define your parent font-size:0; and child define font-size:12px as like your design

as like this

.main-conteiner{font-size:0;}
.block{font-size:12px;}

Demo

-------------------

2nd option is this

now write your html code as like this

<div class="main-conteiner">
  <div class="block">this is just a div</div><!--   --><div class="block">this is another div</div>
</div>

Demo 2

edited May 02 '14 at 10:13

Albzi

15,431
6
46
63

answered May 02 '14 at 10:05

Rohit Azad Malik

31,410
17
69
97

vasekhlav · Answer 6 · 2014-05-03T06:56:16.037

0

You have to change a line in .block class

.block {
  width: 50%;
  display: inline-block;
  background: red;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-box-sizing: border-box; 
}

You can have a look here: FIDDLE

edited May 03 '14 at 06:56

answered May 02 '14 at 10:06

vasekhlav

419
4
12

score 0 · Answer 7 · edited May 02 '14 at 10:12

0

.main-conteiner {
  width: 600px;
  margin: 0 auto;
}

.block {
  width: 50%;
  display: inline-block;
  background: red;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-box-sizing: border-box; 
  float:left;
}

div {
  margin: 0;
  padding: 0;
}

edited May 02 '14 at 10:12

Albzi

15,431
6
46
63

answered May 02 '14 at 10:10

user3223481

1
1

score 0 · Accepted Answer · answered May 02 '14 at 10:14

Here is a nice explanation and various other ways to to get rid of it

Some of them are as others,

<div class="main-conteiner">
    <div class="block">this is just a div</div><!-- 
    --><div class="block">this is another div</div>
</div>

or

<div class="main-conteiner">
    <div class="block">
    this is just a div</div><div class="block">this is another div</div>
</div>

or

<div class="main-conteiner">
    <div class="block">this is just a div</div
    ><div class="block">this is another div</div>
</div>

NamingException · Answer 9 · 2014-05-02T10:46:07.123

-1

<div class="main-conteiner">
        <div class="block">this is just a div</div><!--
        --><div class="block">this is another div</div>
</div>

comment is for removing the spaces between the DIVs.

edited May 02 '14 at 10:46

answered May 02 '14 at 10:08

NamingException

2,388
1
19
41

Thanq for checking it once again. Now it works fine @Vereos :) – NamingException May 02 '14 at 10:28
This is a completely different answer that doesn't add nothing new, since this solution was already pointed out by several answers; Plus, you didn't even edit the first line of your original answer, which still says you have to reduce width to 49%. Still -1 :( – Vereos May 02 '14 at 10:38

how to make divs inline-block?

9 Answers9

Demo Fiddle

Alternative Solution

-------------------