CODEWITHSUNDEEP
htmlcss
Prasanga
Prasanga

Reputation: 1038

how to make divs inline-block?

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

Upvotes: 2

Views: 1408

Answers (9)

vasekhlav
vasekhlav

Reputation: 419

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

Upvotes: 0

NamingException
NamingException

Reputation: 2404

<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.

Upvotes: -1

4dgaurav
4dgaurav

Reputation: 11496


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>

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32202

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

Upvotes: 0

user3223481
user3223481

Reputation: 1

.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;
}

Upvotes: 0

J&#233;r&#244;me
J&#233;r&#244;me

Reputation: 292

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;
}

Upvotes: 0

ashishmaurya
ashishmaurya

Reputation: 1196

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; 
}

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 106058

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>

Upvotes: 1

SW4
SW4

Reputation: 71230

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;
}

Upvotes: 2

Related Questions