Как решить проблему с блоком,разделенным на четверти?

Question

[Worddoc]

Здравствуйте. Нужно создать 1 блок,разделенный на равные четверти по высоте и ширине,т.е. height+width:50%;
Но во первых,они встают в ряд только при ширине в 49%. Плюс когда начинаю сужать браузер, они уходят друг под друга и визуально кажется, что display:block у них.
Таблицей пробовал,работает, но не подойдет этот вариант, т.к. для мобильной версии нужно им встать друг под друга заняв ширину в 100%. Просьба помочь, буду рад ответу!

<div class="social">
					<div><i class="icon-facebook"></i></div>
					<div><i class="icon-facebook"></i></div>
					<div><i class="icon-facebook"></i></div>
					<div><i class="icon-facebook"></i></div>
</div>

.social {
    width: 100%;
    height: 30%;
    position: absolute;
    bottom: 0;
    margin: 0 !important;
    padding: 0 !important;
      div:nth-of-type(1) {
        background: red;
        display: inline-block;
        width: 49%;
        box-sizing: border-box;
        margin: 0 !important;
        padding: 0 !important;
        height: 50%;
      }
      div:nth-of-type(2) {
        background: green;
        display: inline-block;
        width: 49%;
        box-sizing: border-box;
        margin: 0 !important;
        padding: 0 !important;
        height: 50%;
      }
      div:nth-of-type(3) {
        background: pink;
        display: inline-block;
        width: 49%;
        box-sizing: border-box;
        margin: 0 !important;
        padding: 0 !important;
        height: 50%;
      }
      div:nth-of-type(4) {
        background: blue;
        display: inline-block;
        width: 49%;
        box-sizing: border-box;
        margin: 0 !important;
        padding: 0 !important;
        height: 50%;
      }
   }

Answer 1

[Сергей Протько]

flexbox! пример

они встают в ряд только при ширине в 49%

Потому что надо учитывать пробелы. Либо убираем пробелы из html либо лепим кастыли с font-size: 0 на контейнер.

Comments

[Worddoc]

flexbox не работает в ie8-9

[Worddoc]

Спасибо, font-size: 0 помогло

[Сергей Протько]

Worddoc: а вам обязательно суппортить ie8-9? грусть печаль...

[Worddoc]

Нужно уметь их саппортить, приучаю себя

Answer 2

[Пётр Попов]

Можно и табличной разметкой попробовать: codepen.io/Air-Petr/details/xVWJZJ
@media так или иначе нужно будет использовать, чтобы на мобильных всё друг под другом размещалось

Answer 3

[Михаил Чирский]

Как вариант так https://jsfiddle.net/kLh7cnv2/

Будет работать и в ие 8-9 без flex и таблицы