There are two squares: one is black, the other is red:

#black { height:50px; width:50px; background: #000; } #red { height:50px; width:50px; background: ##FF0000; }

When I bring two squares to the page:

 <html> <body> <div id="black"></div> <div id="red"></div> </body> </html>

then they are naturally located under each other (black, and under it red), and I need to arrange them one after another.

How to solve it?

    3 answers 3

     #black { height:50px; width:50px; background: #000; float:left; } #red { height:50px; width:50px; background: ##FF0000; float:left; } <div style="float:left;"> <div id="black">Первый блок</div> <div id="red">Второй блок</div> </div>

      add:

       #black, #red { display:inline-block; }
      • #black, #red {display: inline-block; } if you do that, then gaps between the blocks remain - tukan
      • and so? #black, #red {display: inline-block; margin: 0; padding: 0; } - VIT
      • With this approach, it is necessary to remove all spaces (tabs, line breaks ...) between the closing and opening tags. - ling
      • display: inline-block; - and what does it give? Why is this better than float? - Jenkamen

      Option with display: table;

       .wrapper { display: table; } .red { width: 100px; height: 100px; background: red; display: table-cell; } .blue { width: 100px; height: 100px; background: blue; display: table-cell; } 
       <div class="wrapper"> <div class="red"></div> <div class="blue"></div> </div>