Почему при использовании свойства inline-block для выравнивания блоков положение одного из блоков плывет?

Question

[ahillesius]

Необходимо сверстать каталог товаров.
Слева находится рекламный блок, по центру - карточки товаров, справа - навигационная панель. (на картинке видно как именно)

Когда необходимо разместить блок товаров справа (для этого я присваиваю свойство inline-block для рекламного и блока товаров) относительно рекламного блока, рекламный блок сплывает вниз по сравнению с его необходимым положением (Видно в коде https://jsfiddle.net/z1sck259/4/).
Вопрос состоит, почему рекламный блок сплывает вниз, если использовать свойства inline-block.

Comments

[Ankhena]

Обязательно почитайте: Раз­би­ра­ем­ся с vertical-align.
Но в современном мире для сетки нет нужды использовать инлайн-блоки. Уже придуманы более удобные инструменты - флексы и гриды.

[ahillesius]

Ankhena, Конечно возможно использовать flex для родителя, но интересует конкретный пример. Где-то ошибка в коде или чего-то не хватает ? Я только начинаю разбираться в верстке. Поэтому нужно понимать базовые вещи

[Ankhena]

ahillesius,

Где-то ошибка в коде или чего-то не хватает ?

Да я же дала выше ссылку. Там прекрасная статья с разъяснениями.

[ahillesius]

Ankhena, можете посоветовать книжки для обучения или интернет-ресурс с реальными примерами верстки, чтобы каждую тему разбирали по порядку ? Прохожу обучения на w3schools.com, но там обычно примитивные примеры без разбора: грубо говоря, есть три квадратика и нужно их разместить в ряд. Но когда дело доходит до верстки, использовать эту информацию не получается. Для каждого действия от меня новый вопрос задается, а так не должно быть.

[Ankhena]

ahillesius, точно качественно и дорого есть у меня в профиле. Там же есть и интерактивный курс.
Дальше зависит от ваших способностей усваивать и применять информацию.

Вот эта ваша фраза смущает:

Но когда дело доходит до верстки, использовать эту информацию не получается.

Когда я разбиралась с этим делом, ютуб только-только родился и там не было такого засилья всякой всячины. Но был обычный справочник. Мне его хватало за глаза и за уши. Сейчас его роль выполняет MDN.

[ahillesius]

Ankhena, Также использую mdn, примеров "из жизни" нет. А относительно книг, что-то посоветуете ?

[Ankhena]

ahillesius, не могу придумать, зачем нужны книги по верстке. Опять же, очень давно смотрела, что есть в магазине, сделала вывод, что сайт-справочник заметно короче и в нем поиск работает. Подозреваю, что сейчас ситуация не сильно изменилась.