html - float:"left" vs display:"inline-block" -

i have requirement need display 2 divs side side .this basic requirement need build on many functionalities going further.

i able achieve in 2 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 text in 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 text in 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 text in 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 text in div2 element.</p>   </div> </div> 

which approach better one?

is float:left ? display:inline-block? my ultimate aim make divs responsive in future.thats reason wanted know 1 better also, why there space created between divs when display:inline-block used?

one advantage of using inline blocks can center them horzontally using `text-align: center;' on container element.

the space write due whitespace resulting using line-breaks in code.