Академики подкинули ссылку на занимательную статью, в которой доходчиво рассказываются особенности применения свойства float, поведение элементов, и применение его на практике http://softwaremaniacs.org/blog/2005/12/01/css-layout-float/.
Экспериментируя, у меня возник вопрос, на который я ещё не нашёл ответа. Может кто сможет разъяснить мне этот вопрос?
Исходно имеются три блока. Родительский #bg и два ребёнка - #sidebar, #content со свойствами float.
Я хочу родителю задать фоновый рисунок, повторяющийся по вертикали, чтобы тот цветом разделил на две колонки область экрана.
Если бы дети не были “плавающими”, родительский div повлиял бы на них, а так я пришёл к таким способам решения:
задать фоновую картинку для body, а не для #bg (этот вариант используется в статье);
задать для родителя тоже float;
задать для родителя min-height с конкретным значением.
Возможно есть другие варианты, как назначить этот фон?
P.S. Для фона url ссылка будет активна до 29.02.2017г.
А почему бы не использовать clearfix в данном случае?
По поводу картинки, такой простой фон вы можете нарисовать с помощью линейного градиента, тогда не придется искать место для хранения изображения.
Спасибо. Ценная рекомендация.
Это пробный фон - просто для рассмотрения “Ложных колонок”. В следующем скриншоте я уже немного иной фон для sidebar состряпал, и воспользовался вашим советом. Я правильно сделал?
Я правильно понимаю, если задать линейный градиент с чёткими переходами, в процентах, то границы цвета будут тоже “резиновыми”, как и содержимое “плавающих” колонок, с шириной в таких же процентах как и фоновые переходы?
Если величины в процентах совпадают, то - да.
Клеточки тоже можно градиентами рисовать, кстати.
Псевдоэлемент пишется с двумя двоеточиями (::after), а в остальном правильно.
Еще хотелось бы обратить внимание на чрезмерное использование идентификаторов в вашем примере. Не увлекайтесь ими (исключение - когда они нужны для якорей навигации на странице и если предполагается использование js). Ссылка на кодгайд, если необходимо.
Есть курс в Академии по подписке.
А вот ссылка на готовые решения, код можно скопировать через инспектор.
Еще примеры градиентов: https://webgradients.com/
