Резиновый двухколоночный макет


Содержание

Трехколоночный резиновый макет сайта

Приветствую Вас в очередном уроке, который будет посвящен сегодня языку CSS. И мы реализуем с Вами трехколоночный резиновый макет для сайта. В дальнейшем Вы просто можете копировать этот каркас и приступать к созданию сайта. Макет будет состоять из таких блоков как: шапка сайта, левый сайдбар, правый сайдбар, область контента и футер. Ничего сложного, обычный, довольно просто шаблон. Ну что же, пришло время его реализовать. Для начала напишем следующую структуру html кода:

CSS-макеты

header Шапка
sidebar Левая боковая панель content Содержимое sidebar Правая боковая панель
footer Подвал

Типы макетов:


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

Пример: Сайт Apple
Преимуществом сайта с резиновым типом макета страниц является динамическое изменение размеров страницы по ширине. Ширина такого макета зависит от ширины окна браузера. Есть несколько способов сделать его: все структурные элементы задать в процентах или задать боковым колонкам фиксированную ширину, а центральная часть будет изменяться.

Пример: Сайт Википедии
Эластичный тип макета автоматически адаптируется под размер окна обозревателя, то есть страница будет пропорционально изменяться по своим размерам, подстраиваясь под размер окна браузера или разрешение монитора. При использовании эластичного макета размер основного контейнера и других (важных) элементов задается в em. Em прямо пропорциональны размеру текста или шрифта.

Пример: Сайт компании Тонос
Адаптивным называют макет, который проектируется и разрабатывается таким образом, что сайт становится совместимым с любым устройством, которое может быть использовано для работы в интернете. Адаптивный макет подстраивается под разрешение монитора и окна браузера, меняя при необходимости ширину макета, число колонок, размеры изображений и текста.

Пример: Сайт W3C. При уменьшении ширины окна до 500 пикселов и менее, дизайн сайта изменится.

Некоторые из макетов построены на основе схем позиционирования, в некоторых применяется плавающее размещение.

Фиксированный макет с одной колонкой

container Область дизайна всегда выровнена по центру и имеет фиксированную ширину

Ширина колонки задается свойством width, а выравнивание по центру свойством margin со значением auto. Свойство margin со значением auto выравнивает блок по центру только в комбинации со свойством width. Чтобы убрать поля, установленные по умолчанию для веб-страницы, для селектора body следует добавить свойство margin с нулевым значением.

Откройте Пример 1, попробуйте изменить ширину окна браузера. Проанализируйте код данной web-страницы.

В данном примере шапка сайта зафиксирована в верхней части окна браузера. Для этого использовалось свойство position со значением fixed. Элемент остается на одном месте при прокрутке, а его положение задается координатами через свойство(а) top, right, bottom, left.

Добавление отступов и границ к блочному элементу увеличивает его ширину, что надо учитывать при вёрстке. Однако ширина вырастает, только если для блока установлено значение width. Если требуется использовать свойство width совместно со свойствами padding и/или border, то следует:


    Использовать вложенный блок и установить необходимые свойства для него.

Данный способ использовался в примере 1.
Учесть значения свойств padding и/или border при вычислении значения свойства w >

Данный способ использовался в примере 2.


CSS-свойство width задаёт не общую ширину блока, а только ширину содержания. Общая ширина блока затем складывается из трёх компонентов: ширины содержания, отступов и ширины рамок слева и справа. Можно измененить алгоритм расчета ширины элемента так, чтобы свойство width задавало не ширину содержания, а общую ширину блока. Для этого следует использовать свойство box-sizing со значением border-box.

Данный способ использовался в примере

Фиксированный двухколоночный макет

container
nav Навигация content

Действуем аналогично описанному выше способу формирования колонок с использованием плавающего размещения, но значения свойств width и margin-left задаем в процентах.

Свойство min-width для блока container устанавливает минимальную ширину, если окно браузера будет меньше этого значения, появится горизонтальная полоса прокрутки. Свойство max-width, наоборот, задаёт максимальную ширину, которая не будет превышена.

Откройте Пример 4, попробуйте изменить ширину окна браузера. Проанализируйте код данной web-страницы.

Три столбца с шапкой и нижним колонтитулом

header Шапка
nav Боковая панель content Содержимое sidebar Боковая панель
footer Подвал

В данном макете используется плавающее размещение.

Откройте Пример 5, попробуйте изменить ширину окна браузера. Проанализируйте код данной web-страницы.

Обратите внимание, что свойство float для всех столбцов установлено в значение left , а сами столбцы размещаются друг за другом по горизонтали. Для элемента div с ID-селектором #footer используется свойство clear со значением both . Это гарантирует, что нижний колонтитул полностью очистит столбцы с плавающим размещением.

Для колонок можно указать фиксированную ширину или плавающую (использовать значения, выраженные в процентах).


Виды 2-хколоночных макетов на основе свойства float

Двухколоночные макеты — это довольно распространенный вариант верстки сайтов, например, созданных на платформе WordPress.

Чаще всего (пока, во всяком случае), они верстаются на основе плавающих элементов, т.е. таких, которые имеют свойство float со значением left или right. Проблемой чаще всего выступает размер боковой колонки с таким css-правилом, т.к. он обычно бывает невелик и «не дотягивает» до низа сайта.

Чтобы сформировать колонки одинаковой высоты, есть несколько подходов. Рассмотрим их все на примерах. Но сначала договоримся об общей структуре сайта.

Традиционно 2-хколоночный макет состоит из шапки, основной части, разделенной на 2 неодинаковые части: котентную и боковую (сайдбар), и подвала. В HTML5 появились новые семантические теги, которые отвечают за определенные элементы страницы, которые ранее имели вид div-ов с id или классом.

На рисунке ниже изображена очень упрощенная структура сайта, в которой перечислены основные блоки, которые будут в дальнейшем использованы в макетах.

В каждом из html-файлов примеров будет одна и та же структура в :

Идеальная 3-колоночная вёрстка средствами CSS

Пропустим ту часть, где я говорю, что меня зовут Рималь и то, что я увлекаюсь версткой дизайна для сайтов, а именно HTML & CSS.

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

На просторах интернета я не нашел нормального объяснения о создании N-колоночных блоков сайта, всегда и везде был кривой и некрасивый код.

Данная статья более подойдет для новичков в веб-разработке, и я хочу поделиться им, ведь новички — это свежие умы, которые рано или поздно заменят старых нудных кодеров.

Наша цель — сделать трехколоночный сайт, блоки которого будут:

  1. Уменьшаться в зависимости от размера экрана (т.е. не будут уходить вниз);
  2. Растягиваться по всей ширине экрана (обычно это 2-х колоночный сайт);
  3. Адаптироваться при уменьшении заданных размеров.

Итак, приступим. Для того, чтобы сделать горизонтальные 3 колонки, мы будем использовать свойство display: inline-block. Да-да, свойство float уже не так актуально, но оно нам все же понадобится.

Прежде чем задать им свойства, создадим 3 блока, обернув их в классы main и inline:

Далее будет логично написать стили для этих классов, что мы и сделаем:

Размер окна больше 900px

Размер окна меньше 900px

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

Для того, чтобы растянуть дизайн на всю ширину экрана, достаточно удалить свойство max-w > main.

Чтобы дизайн полностью не уменьшался при малых размерах окна, а адаптировался, добавляем в стили @media запрос:


Более подробно можно посмотреть на JS Fiddle — приветствуется любое изменение кода в лучшую его сторону.

За материал выражаем благодарность нашему подписчику, Рималю Сафарову.

Однако обратите внимание, что проще всего добиться такого результата средствами CSS Flexbox, о котором мы подробно рассказали в нашей статье.

Готовые макеты блоков для веб-страниц на HTML и CSS

2014-06-25 / Вр:00:49 / просмотров: 110793

Всем привет!
Однажды я подумал: для чего постоянно прописывать один и тот же код для создания каких-либо сайтов, если можно создать заготовки и пользоваться ими. Это, во-первых, ускорит время создания сайтов. Во-вторых, если прописать сразу правильно макет, то ошибки в коде значительно уменьшатся. В-третьих, те, кто пользовался генераторами шаблонов, могут о них забыть.

Итак, существуют резиновые и фиксированные макеты.

Фиксированные макеты – это когда ширина блоков задается в пикселях (px), а это значит, что размер макета сайта будет фиксированным не зависимо от размера экрана.

Резиновые макеты – это когда ширина блоков задается в процентах (%), а это значит, что макет сайта будет полностью гибким и автоматически подстраиваться под любой размер экрана.

Макет может быть одноколоночным:

Одноколоночные макеты (веб-страницы)

○ Выравниваем блок с контентом по центру экрана.
Пример :

Такое размещение блока будет полезно и интересно для дизайна:

— точки входа на сайт или в админ-панель;

— сообщения об отправленном письме и т. д.

Макет одной колонки:

○ Еще один вариант одноколоночного макета:

Двухколоночные макеты (веб-страницы)

Фиксированные макеты

Частенько в сети интернет встречаются двухколоночные веб-страницы. Это самые распространенные варианты верстки сайтов, так как считаются самыми удобными и для создания. А также они хорошо воспринимаются пользователями. В правой колонке размещается меню, а в левой – контент. Или в правой колонке размещается контент, а в левой – меню.

Двухколоночный макет (слева меню, справа контент):

Двухколоночный макет (слева контент, справа меню):

Примечание: чтобы поменять местами блоки, достаточно поменять значение в строках 30, 33, 41:


(слева контент, справа меню)

float: right; /* Обтекание блока по левому краю */

margin-right: 130px; /* Отступ справа */

clear: right; /* Отменяем действие float */

(слева меню, справа контент)

float: left; /* Обтекание блока по правому краю */

margin-left: 130px; /* Отступ слева */

clear: left; /* Отменяем действие float */

○ Другие варианты фиксированного макета в две колонки. С левой стороны первый блок – это контент, с правой стороны второй блок – новости и под ними меню:

○ Другие варианты фиксированного макета в две колонки. С левой стороны первый блок – это контент, с правой стороны второй блок – новости и под ними меню:

Резиновый двухколоночный макет

Многие веб-мастера используют резиновые макеты сайтов. Это удобно, так как размер сайта автоматически подстраивается под размер монитора.

Резиновый двухколоночный макет (слева меню, справа контент):

Резиновый двухколоночный макет (справа меню, слева контент):

Чтобы поменять местами меню с контентом (справа меню, слева контент), достаточно в строке 22 (.s >leftна right :

float: right; /* Обтекание справа */

и в строке 29 (.content) заменить числовое значение 10px 5px 20px 25% на 10px 25% 20px 5px

margin: 10px 25% 20px 5px; /* Значения отступа от правого блока */

○ Другие варианты резинового макета в две колонки. С левой стороны первый блок – это контент, с правой стороны второй блок – новости и под ними меню:

○ Другие варианты резинового макета в две колонки. С левой стороны первый блок – это контент, с правой стороны второй блок – новости и под ними меню:

Триколоночные макеты (веб-страницы)

Фиксированный макет в три колонки

Частенько макет как в три колонки используют для создания блога.


○ В первой колонке размещается контент, во второй колонке может находиться реклама или новости и в третей колонке меню:

○ Следующий вариант фиксированного трехблочного макета, когда в первой колонке размещается меню, во второй колонке может находиться реклама или новости и в третей колонке контент:

○ Следующий самый распространенный вариант фиксированного трехблочного макета, когда в первой колонке размещается меню, во второй колонке может находиться контент и в третьей колонке реклама или новости:

Резиновый макет в три колонки

○ В первой колонке размещается контент, во второй колонке может находиться реклама или новости и в третьей колонке меню.

○ Следующий вариант резинового трехблочного макета, когда в первой колонке размещается меню, во второй колонке может находиться реклама или новости и в третьей колонке контент.

○ Следующий самый распространенный вариант резинового трехблочного макета, когда в первой колонке размещается меню, во второй колонке может находиться контент и в третьей колонке может находиться реклама или новости:

Постараюсь в следующей статье написать свои собственные макеты, может, мои решения вам покажутся лучше.

vsko / 2-columns-liqu > Created Dec 6, 2013

html , body <
height : 100 % ;
>
body <
margin : 0 ;
>
.layout <
min-width : 800 px ;
max-width : 1200 px ;
height : 100 % ;
margin : auto ;
>
.header <
height : 14 % ;
background : #eed ;
>
.sidebar , .content <
height : 84 % ;
margin-top : 1 % ;
>
.sidebar <
width : 20 % ;
float : left ;
background : #dde ;
>
.content <
margin-left : 21 % ;
background : #ded ;
>
html >
head >
meta charset = » utf-8 » >
link rel = » stylesheet » href = » 2-columns-liqu >» >
head >
body >
div class = » layout » >
div class = » header » >header div >
div class = » s >» >s >div >
div class = » content » >content div >
div >
body >
html >
  • © 2020 GitHub , Inc.
  • Terms
  • Privacy
  • Security
  • Status
  • Help

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Библиотека Интернет Индустрии I2R.ru

Малобюджетные сайты.


Продвижение веб-сайта.

Контент и авторское право.

«Резиновая вёрстка»: используем отрицательные поля

Creating Liquid Layouts with Negative Margins

Я недавно столкнулся с задачей, в которой надо было создать двухколоночный макет страницы с «шапкой» и «подвалом», причём в коде страницы контент должен был быть расположен перед блоком боковой колонки. Я решил воспользоваться возможностью продемонстрировать малоизвестный приём CSS-вёрстки: отрицательные поля (negative margins). Отрицательные поля позволяют нам сместить область контента за границы окна браузера, освободив место для боковой колонки.

Постановка задачи

Итак, чтобы показать, как полезны могут быть отрицательные поля для создании резиновой вёрстки, давайте-ка сделаем резиновый двухколоночный макет с «шапкой» и «подвалом». Область основного содержимого (контента) будет слева, вторая колонка — справа. Сделать это, в общем-то, довольно просто, но мы пойдем немного другим путем, потому что по условиям задачи код страницы у нас будет иметь определенную структуру.

Зная, как работают «плавающие» блоки, проще всего было бы разместить боковую панель перед блоком контента, позволив ей обтекать (float) контент с правой стороны. Однако, раз уж нам так важно, чтобы в текстовых браузерах, программах для чтения с экрана и старых браузерах, не понимающих наши таблицы стилей, сначала был виден контент, а потом уже боковая панель, значит нам надо найти такое решение, которое бы позволило разместить контент в начале кода. Причем это решение должно ещё и работать в большинстве браузеров.

Исходный код

Давайте-ка взглянем на код двухколоночной страницы с «шапкой» и «подвалом», с которым мы будем работать:

Посмотрите на Примере 1, каким будет содержимое, не обработанное стилевыми правилами. Увидев пример, вы поймете, почему мы хотим расположить контент перед боковой панелью — так отобразят страницу те браузеры, которые не способны правильно понять наши таблицы стилей.

Понятно, что левая область, содержащая контент, должна занять всю свободную ширину страницы минус пространство, необходимое для боковой панели. Хорошо было бы, если бы мы могли задать ширину следующей формулой «100% минус 200 пикселей»? Используя отрицательные границы, мы можем добиться нужного эффекта. Нет, честно!

Необходимые стили

Теперь примемся за CSS. Как мы и сказали, зададим нашему блоку с контентом ширину, равную 100%, включаем «левое обтекание» (float: left;), и устанавливаем отрицательное правое поле, равное «-200px». Включение обтекания (float) здесь очень важно, так как поля (раз уж мы работаем с отрицательными величинами) у плавающих (float) и строчных (inline) элементов обрабатываются броузерами совсем не так, как у «неплавающих» блочных элементов.

Отрицательное правое поле у блока контента нужно скорей для того, чтобы боковой блок «всплыл» в освободившееся место, нежели для изменения вида самого блока контента. Посмотрите, что получилось в результате, на Примере 2. Мы «сплавляем» боковую панель вправо (float: right;) и задаем ей ширину, равную тем самым оставленным для неё 200 пикселям. Наконец, мы задаём для нашего «подвального» блока свойство «clear: both», дабы он располагался ниже контента и бокового блока, независимо от того, какая из колонок окажется длиннее. Также мы пропишем фоновые цвета для «шапки» и «подвала», чтобы они выделялись на странице.

Данный CSS даст нам то, что изображено в Примере 2. Как видите, нам нужно теперь отодвинуть контент от правой стороны документа. Поэтому мы решили воспользоваться ещё одним div-блоком — этот метод понимается браузерами намного лучше, чем любой другой способ. Итак, мы внесли следующие изменения в наш XHTML код:

Теперь мы зададим блоку контента правое поле и фоновый цвет, расположив его тем самым там, где нам нужно, и отделив его от боковой панели.

Прежде чем перейдем к визуальному оформлению страницы, давайте решим ещё одну проблему. Нам нужно задать нулевое верхнее поле первому элементу в нашем блоке контента, равно как и нулевое нижнее поле для последнего элемента. В нашем конкретном случае мы просто зададим для заголовка h1 margin-top: 0, и создадим класс для последнего абзаца в блоке контента, у которого будет нулевое нижнее поле. Мы это сделали — теперь можно и на Пример 3 посмотреть.

Уже значительно лучше, но, конечно, вы обратили внимание на то, что правая панель не заполняет всё пространство, доступное ей по высоте. Спасибо Дэну Цедерхолму (Dan Cederholm) за небольшой трюк с использованием фоновых изображений, с помощью которого мы легко решим возникшую проблему (статья Дэна «Faux Columns»).

Во-первых, создадим вот такую картинку. Ее ширина 200 пикселей, т.е. такая же как и ширина нашей боковой панели.

Согласно трюку Дэна, добавим обрамляющий блок, охватывающий блоки «container» и «sidebar», а также добавим еще один блок со стилем clear: both прямо под ними. Наш XHTML код будет выглядеть так:

Теперь, сделав это, мы можем добавить к охватывающему блоку фоновое изображение. Мы зададим фоновому изображению свойство «repeat-y» и прижмём его к правому краю. Чтобы побороть один баг в Internet Explorer, нам также нужно добавить такое же фоновое изображение и к блоку «container».


Не забудем мы и про стили для нашего выключающего блока (с классом «clearing»), для того чтобы «подвал» расположился сразу под обеими колонками, а также для того, чтобы они отображались корректно:

Всё это даст нам отлично смотрящийся «резиновый» двухколоночный макет страницы, не теряющий привлекательность даже при отключенных CSS. Взгляните на Пример 4. Добавьте к элементам границы и отступы, и у вас получится отличная отправная точка для своего резинового макета. Само собой разумеется, что если бы нам потребовалось разместить боковую панель слева, то мы бы просто поменяли значения для float: и margin: на противоположные. Было «float: left» — стало «float: right»; было «margin-right: 200px», стало — «margin-left: 200px», и так далее.

Колдуем дальше: трёхколоночная версия

А что если пойти дальше и попробовать создать трёхколоночный макет с гибкой областью контента посередине? Мы не просто сделаем это — мы сделаем это в два счета! Нам понадобится внести несколько последних мазков в наш XHTML-код, добавив в него ещё несколько блоков — теперь мы готовы дописать ещё чуть-чуть CSS.

И снова псевдо-колонки

И вот вновь, с тех пор как нам требовалось сделать высоту всех колонок на странице визуально одинаковой, мы создаём ещё псевдо-колонки. И вот мы сделали две таких картинки:

Как вы можете видеть в вышеприведённом XHTML-коде, мы добавили: общий обрамляющий блок

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

Затем добавим вот такие простые стили, снова используя поля для позиционирования левой и средней колонок, так, как нам нужно.

Наконец, мы добавили следующие стили «шапке» и «подвалу», придав им более законченный вид:

Посмотрите на Пример 5 и не стесняйтесь заглянуть в его код.

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

В заключение

Как вы видите, отрицательные поля — малоизвестный аспект CSS-вёрстки, который дает еще один импульс для творчества тем из нас, кому так важен порядок расположения элементов в коде страницы, и кто не против добавить для этого несколько дополнительных обрамляющих div-блоков.

Oб авторе:
Ryan Brill has a passion for design, especially when XHTML and CSS are involved. He’s fully devoted to doing his part to push the web in the right direction, not only when writing for his blog, but also when developing sites through his web development company, Infinity Web Design.

Резиновые сетки для верстки (адаптивный веб-дизайн)

Многие сайты построены на сетке. В основном все сетки не слишком сильно отличаются друга от друга. И это понятно: ширина любого сайта зависит от размеров экрана монитора. Однако некоторые сетки отличаются своей продуманностью, например, Bootstrap, что серьезно облегчают работу верстальщика.

Ниже в статье приведены примеры резиновых (эластичных) сеток, так называются сетки, которые изменяют свою ширину при изменении размеров окна браузера. Вы можете взять за основу любую сетку (приведены ниже), хотя я бы советовал обратить ваше внимание на сетку от Twitter Bootstrap.

Простая сетка

К сожалению, не реализована поддержка IE7 . Использовать данную сетку можно будет через год (конец 2013, начало 2014).

Заверстанные сетки

Сетки уже заверстаны. С помощью переключателей можно подобрать нужный вам макет.

Резиновый двухколоночный макет


Простой двухколоночный резиновый макет, работает во всех основных браузерах.

Инструменты

И наконец, в интернете полно сеток и живых примеров для вашего вдохновения.

На хабре выложена отличная статья по адаптивному веб-дизайну: 26 CSS-фреймворков для адаптивного веб-дизайна

Адаптированный под мобильные шаблон 2 колоночного сайта.

После того, как мы рассмотрели как можно сделать простейший одноколоночный макет адаптированный под мобильные устройства, давайте рассмотрим более сложный пример верстки 2 колоночного макета.

Добавим к исходному макету сайта боковую колонку.

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

Смысл следующий: мобильные устройства имеют очень узкую ширину экрана и размещать по горизонтали несколько блоков не имеет смысла. Все равно они будут располагаться очень криво и будет появляться горизонтальная полоса прокрутки.

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

Давайте посмотрим, как этого можно добиться.

Шаг 1. Располагаем элементы по горизонтали для отображения на больших мониторах.

Для решения этой проблемы, добавляем на веб-страницу следующий код.

CSS:

По сути, мы размещаем две колонки рядом друг с другом с помощью свойства float.

Подробнее об этом здесь.

Посмотрите на видео, что будет происходить с этими двумя колонками, при сужении ширины экрана браузера.

При определенном значении ширины окна браузера, правая колонка «выпадает» вниз и смотрится очень не хорошо.

Было бы намного лучше, если бы правая колонка «выпала» вниз и стала занимать большую часть экрана и левая колонка также заняла бы то оставшееся пространство, которое занимала правая колонка.

Давайте посмотрим, как это можно сделать.

Шаг 2. Адаптируем макет под мобильные устройства.

Добиться подобного эффекта позволяет правило CSS @media. Подробнее о нем разбиралось здесь.

Давайте посмотрим, каким образом веб-страница будет отображаться теперь при сужении ширины окна браузера.

Блоки, которые располагались в несколько колонок теперь подстраиваются под новую ширину экрана браузера и выстраиваются в столбик.

Резиновая средняя колонка в трехколоночном макете

Очень часто нужно сделать трех колоночный макет сайту, где две крайних из них должны быть фиксированные, а средняя (вторая) стягиваться и растягиваться (должна быть резиновой). Когда-то давно я нашел подходящее для себя решение с отрицательным маргином и применил на одном сайте.

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

Спустя уже практически 3 года, я наконец-то решился вынести эту информацию в отдельную публикацию, к которой я всегда могу вернуться и перенять эту технологию на новый сайт.

Трехколоночный макет

Двухколоночный макет

Точно таким же способом можно сделать двухколоночный макет.

Илон Маск рекомендует:  Язык xml просмотр xml документов
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL