Как расположить два квадрата в один ряд без отступа?

#html #css

Есть два квадрата: один черный, другой красный:

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

Когда я вывожу на страницу два квадрата:
 
      
    

    

    


то они естественно располагаются друг под другом (черный, а под ним красный), а мне
надо их расположить друг за другом.
Как решить это?    

Ответы

Ответ 1

#black {
    height:50px;
    width:50px;
    background: #000;
    float:left;
}

#red {
    height:50px;
    width:50px;
    background: ##FF0000;
    float:left;
}


     
Первый блок
     
Второй блок



Ответ 2

добавить:
#black, #red {
    display:inline-block;
}


Ответ 3

Вариант с 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;
}