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?