1

I have a requirement where a I need to display two divs side by side .This is the basic requirement where I need to build on many functionalities going further.

I am able to achieve this in two approaches:

Approach 1:

<div id="id1" style="width:100%">
  <div id="id2" style="width:100px;color:#0000FF;display:inline-block;border-color: red;border-style: solid;">
  <p>This is some text in a div1 element.</p>
  </div>
  <div id="id3" style="width:100px;display:block;display:inline-block;border-color:blue;border-color: blue;border-style: solid;">
  <p>This is some text in a div2 element.</p>
  </div>
</div>

Approach 2:

<div id="id1" style="width:100%">
  <div id="id2" style="width:100px;color:#0000FF;float:left;border-color: red;border-style: solid;">
  <p>This is some text in a div1 element.</p>
  </div>
  <div id="id3" style="width:100px;display:block;float:left;border-color:blue;border-color: blue;border-style: solid;">
  <p>This is some text in a div2 element.</p>
  </div>
</div>

Which approach is the better one?

Is it float:left ? display:inline-block? My ultimate aim will be to make divs responsive as well in the future.Thats the reason wanted to know which one is better Also, why is there space created between the divs when display:inline-block is used?

user2630764
  • 574
  • 1
  • 6
  • 18
  • 5
    This question is either **opinion based** and so is off-topic for Stack Overflow. If you have a specific, answerable, programming issue, please provide full details. – Paulie_D Sep 07 '16 at 11:44
  • http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements?rq=1 – Paulie_D Sep 07 '16 at 11:45
  • Very opinion based, besides [`display: flex` is *obviously* the best option](http://jsbin.com/guzevehoya/edit?html,css,output) :p – misterManSam Sep 07 '16 at 12:04
  • 1
    In case you are interested, I received a very good answer to a question about float logic - which might help you with your issue as well. http://stackoverflow.com/questions/30858717/css-float-logic – Zze Sep 07 '16 at 12:09

1 Answers1

2

One advantage of using inline blocks is that you can center them horzontally using `text-align: center;' on the container element.

The space you write about is due to whitespace resulting from using line-breaks in the code.

Johannes
  • 53,485
  • 15
  • 52
  • 104