Как сверстать таких 4 блока?

Question

[Mini MVC]

Вот что у меня получилось codepen.io/anon/pen/YPZwGO Ни как не получаеться сделать как на фото, что я делаю не так?

А должно получиться вот так.

Answer 1

[Murat Atila]

Сверстал на скорую руку codepen
Если вдруг решите юзать, учтите что надо переделать кнопку.

Comments

[Mini MVC]

Спасибо тебе большое чётко зделал очень понятно

Answer 2

[IceJOKER]

если % используете, то лучше и в padding|margin тоже % указывать(или воспользоваться calc() , т.к. все эти значения суммируются при вычислении и два блока в width: 49% и с padding в пикселях - это не есть айс, т.к. не всегда эти пиксели входят в рамки оставшихся %

.menu .menuWrapper .span_1_of_2 {
    height: 400px;
    width: 48%;
}
.menu .menuWrapper .col {
    background-color: #e5e1d2;
    border-radius: 3px;
    float: left;
    margin-right: 20px;
    margin-top: 20px;
    padding: 30px 0;
    text-align: center;
}

Comments

[Mini MVC]

последние 2 блока не как первые 2

[IceJOKER]

ALLEROY 88: у меня в браузере все выглядело одинаково.

[Mini MVC]

IceJOKER: смотри как у меня выгледит оно tber01.wi3.sde.dk/restaurant/index.php?page=2

[Mini MVC]

IceJOKER: последние 2 блока чуть вытягиваються на право почему?

[IceJOKER]

ALLEROY 88: потому что у нижних блоков margin-right есть , а у верхних обнулены

[IceJOKER]

попробуйте убрать правила на строчках: 394, 367, 139

[Mini MVC]

IceJOKER: сделал не чего не изменилось

[IceJOKER]

ALLEROY 88: значит сделали не так. потому что тоже самое я сделал у себя и у меня все 4 блока выровнялись нормально.

[Юрий Пузыня]

ALLEROY 88 , ну что вы скромничаете? Давайте ваше фирменное "Сверстайте кому не лень", как в предыдущих вопросах, так глядишь с миру по нитке к концу месяца сайт закончите.

[Mini MVC]

IceJOKER: когда через бравзер смотрю я нахожу его, а вот через код не могу найти.