Css — Три дива верстки не слушают

Содержание

Верстка div три колонки с шапкой и подвалом

Доброго времени суток ��

Задали мне тут вопрос, о том как я верстаю свои шаблоны, которые имеют три колонки. То есть это два сайдбара расположены по боками и контент посредине. Данная структура встречается часто, к тому же за частую нужно еще делать и адаптивный вариант, а также некоторые просят еще и правильное расположение сайдбаров относительно контента опираясь на правила СЕО. А это значит, что сайдбары по коду верстки должны идти после контента.

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

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

Сам HTML код структуры:

По коду видно, что шапка и подвал не зависимы. То есть они не заключены в какие-то контейнеры, то-есть если у вас сайт будет иметь определенную ширину, то шапку и подвал нужно отдельно центрировать, дабы они не съехали. Забегу наперед, в моем примере контент будет шириной 1170пикселей и поэтому я в стилях подвалу и шапке задам эту же ширину и выровняю по центру.

Сам контент вместе с сайдбарами, заключен в общий контейнер, который имеет айди — wrapper. Далее контент, который располагается по центру и имеет айди — content, заключается в еще один контейнер с айди — main. Это обязательно, чтобы в будущем получилась адаптивность.

После контента рядом располагаются два сайдбара — левый с айди — left_side и правый с айди — right_side.

Чтобы все правильно отображалось, нужно добавить стили CSS:

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

Так же сайдбары имеют фиксированную ширину, а при уменьшении размера окна браузера, уменьшается средняя колонка — контент. Если будете менять ширину сайдбаров, меняйте свойство margin у контента, чтобы задать правильные отступы.

Важным моментом является свойство у подвала — clear:both;. Если его убрать, то подвал подпрыгнет вверх к шапке, а это нам не нужно вообще. Если Вам нужно будет сделать отступ между контентом и подвалом, то можете между ними добавить еще один div-блок и ему прописать свойство clear:both;, а у подвала убрать его и задать отступ. Например:

Теперь добавим стилей CSS уже для правильного отображения сайдбаров и контента на мобильных устройствах, то есть добавим адаптивности нашей версте.

У меня указаны параметры для ширины сначала — 950px, потом — 500px.Если Вы будете менять ширину контента или всего контейнера, то можете поменять значения на свои, не забывайте про это и просчитывайте правильно, чтобы потом не возникло проблем.

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

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

На этом все, спасибо за внимание. ��

Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)

Резиновая верстка div 3 колонки (HTML)

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

Пример

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

Обратите внимание на код! Центральный див слой (

В левой колонке часто располагается навигация сайта.

В правой колонке часто размещают новости, форму авторизации, поиска, ссылки, спонсоры и так далее.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Трюки с CSS writing-mode

Дата публикации: 2020-12-19

От автора: свойство CSS writing mode устанавливает горизонтальное и вертикальное направление написание текста. Хотя оно предназначено для целей мультиязычности, но может быть использовано для дизайна.

Основы

Свойство CSS writing-mode устанавливает направление содержимого как по горизонтали, так и по вертикали.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

horizontal-tb — Контент размещается горизонтально слева направо, вертикально сверху вниз. Значение по умолчанию.

vertical-rl — Контент размещается вертикально сверху вниз, горизонтально справа налево.

Цукерберг рекомендует:  Получение всех возможных значений ENUM колонки таблицы

vertical-lr — Контент размещается вертикально сверху вниз, горизонтально слева направо.

лабы по информатике, егэ

лабораторные работы и задачи по программированию и информатике, егэ по информатике

CSS урок 14. Блочная верстка сайта

Блочная верстка сайта

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

Отличительные черты от табличной верстки

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

  1. Высота слоев div ограничена высотой контента:
  2. В случае, когда содержимое слоя превышает его установленную высоту, то браузеры по-разному ведут себя — одни увеличивают высоту слоя под новый контент, а другие, оставляя высоту первоначальной, накладывают контент поверх слоя.
  3. Фиксированный дизайн или
    жесткая блочная верстка (две колонки)

    • Фиксированный макет подразумевает использование слоев заданной ширины, которая определяется разрешением монитора пользователя.
    • Так как наиболее популярным среди пользователей сети является разрешение монитора 1024×768, то желательно ориентироваться именно на него. Общая ширина блоков в таком случае составляет 900–1000 пикселей (небольшая часть пикселей требуется на полосы прокрутки и границы окна браузера).
    • Основной блок с контентом размещается по центру, тогда «свободные» поля по краям неплохо смотрятся даже при большом разрешении монитора.

    Рис.1. Пример фиксированного дизайна

    • «Разбиваем» все основные элементы страницы на блоки следующим образом:
      • блок 1 — слой первый ( ),
      • блок 2 и 3 заключаются в единый блок ( ),
      • блок 2 — слой с меню ( ),
      • блок 3 — слой с контентом ( ),
      • блок 4 — слой с .

    Схематично изобразим расположение блоков:

    Верстка трехколоночного макета страницы с помощью CSS

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

    Хорошо, когда кто-то уже сделал подобное до тебя, не приходится заново “придумывать колесо”. Достаточно найти готовое решение, которое следует хорошенько запомнить и адаптировать под себя, если потребуется. Моим замечательным помощником по данному вопросу стал уже не однократно упоминаемый мной сайт Layout Gala, на котором предлагается множество хороших макетов для верстки страниц со всевозможными вариантами представления контента.

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

    Особенности данного макета:

    • Текучая (резиновая) верстка — растяжка происходит за счет контентной части, левая и правая колонки фиксированные. Я так полагаю, что этот макет можно изменить и под одновременное растяжение всех 3-х частей. Но пока мне этого не приходилось делать.
    • Используется фактор внутренней поисковой оптимизации — блок с контентом расположен в коде до начала левой и правой колонки. Этот один из моих любимых моментов в дивовой верстке. Контент начинается практически в самом начале разметки страницы. При желании можно и хэдер, если он достаточно большой, разместить ниже кода контента.

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

    Структура HTML-кода

    При использовании оригинального кода макета с Layout Gala в нашем “любимом” IE наблюдался следующий баг — при быстром сужении окна браузера левая колонка съезжала к центру. Чтобы от этого избавиться, я поместил блоки контента и обоих колонок в дополнительный контейнер с >

    CSS-таблицы

    Приведу здесь только ту часть CSS-кода, которая формирует 3 колонки в блочном варианте верстки (остальное будет в примере). Прошу обратить внимание, что для того, чтобы сработало CSS-свойство #container для устранения бага в IE, необходимо одновременно задействовать правила минимальной ширины для основного блока ( width: expression и min-width ).

    Пример

    Можно посмотреть на готовый пример макета страницы в три колонки с использованием блочной верстки (2 колонки фиксированные).

    Колонки одинаковой высоты

    Как добиться одинаковой высоты колонок при div верстке? На текущий момент я знаю только три способа. Перечислю их в порядке полезности и сложности, те что выше в списке боллее простые для понимания, а те что ниже наиболее функциональные:

    1. Изменение display
    2. Делать огромные margin и padding плюс overflow:hidden
    3. Вложенные колонки

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

    1. Изменение свойства display

    Это самый простой способ выравнивания колонок из всех. В то же время он вообще не работает в Internet Explorer ниже и включительно 7 версии. Суть метода:

    • Делаем div в котором будут размещаться три наши колонки.
    • Создаем внутри этого дива еще три дива которые собственно и будут теми самыми колонками.
    • Присваиваем родительскому диву display:table;
    • Присваиваем дочерним дивам display:table-cell;

    Все. Довольно просто, не правда ли?

    При этом отдельный див для табличного ряда (

    2. Использование margin, padding + overflow:hidden

    Способ уже немного посложнее, но тоже ничего сверхумного. Радует то, что способ работает во всех браузерах. Суть метода:

    • Делаем див в котором будем размещать все наши колонки
    • Создаем внутри этого дива еще три дива которые собственно и будут теми самыми колонками.
    • Выравниваем колонки по горизонтали с помощью float:left;
    • Присваиваем всем колонкам margin-bottom:-32000px; padding-bottom:32000px;
    • Присваиваем overflow:hidden для родительского дива.

    Если непонтяно что мы тут сделали, то объясню подробнее.

    Что делает свойство margin-bottom:-32000px?
    Оно растягивает колонку вниз на 32000px.

    Что делает свойство padding-bottom:32000px?
    Оно делает отступ от нижнего края блока до контента в 32000px.

    Что делает свойство overflow:hidden у родительского дива?
    Оно скрывает ту часть блока в которой нет контента.

    Если просуммировать то что я написал выше, то получается, что мы растянули пустое пространство снизу каждой из колонок, и обрезаем его по высоте той колонки в которой больше всего контента. По факту пустое пространство тянется еще очень долго вниз, но пользователь его не видит за счет overflow:hidden.

    3. Вложенные колонки

    Для большей ясности советую изучить пример в котором все это уже работает:
    http://verstaem.com/examples/columns/includes/

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

    Первый шаг. Плацдарм

    Создадим родительский див в котором будем располагать все наши колонки

    Второй шаг. Создаем оформительские дивы

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

    Третий шаг. Создаем дивы с контентом

    В последнем из трех вложенных дивов создадим еще три дива, но уже параллельно. Последние три дива не надо вкладывать друг в друга. Эти параллельные дивы будут отвечать за контент каждой из колонок. В них будет расположен текст и любой другой html.

    Четвертый шаг. Определяемся с шириной оформительских колонок

    Ширина всей страницы (ширина плацдарма) — 100%. Ширина левой колонки 20%. Выставим для левого оформительского дива ширину 20%. Пока все просто.

    Ширина центральной колонки 60% от ширины страницы. Так как центральная колонка вложена в левую, то ее ширина будет рассчитываться относительно левой колонки(родителя). Центральная колонка в три раза шире чем левая, то есть нужно выставить ширину для центральной колонки в 300%.

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

    Пятый шаг. Определяемся с шириной контентных колонок

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

    Ширина правой колонки 20% от ширины страницы. Мы будем рассчитывать все размера контентных дивов относительно этой величины.

    Ширина левой контентной колонки — 100% от родителя (20% от страницы)

    Ширина центральнойконтентной колонки — 300% от родителя (60% от страницы)

    Ширина правой контентной колонки — 100% от родителя (20% от страницы)

    Шестой шаг. Двигаем оформительские колонки

    Нам нужно сделать так, чтобы каждая из оформительских колонок начиналась там, где заканчивается предыдущая колонка. Сделать это довольно просто. Мы просто присвоим центральной и правой колонкам position:relative и сдвинем их вправо на 100% — left:100%.

    Почему именно 100%? Потому что нам надо сдвинуть колонку на всю ширину родительского блока.

    Седьмой шаг. Двигаем контентные колонки

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

    Для начала выровняем колонки по вертикали с помощью float:left;

    Теперь присвоим левому и центральному контентному диву position:relative;, дальше начнем двигать.

    Левый контентный див начинается в левом верхнем углу правой колонки. Чтобы он стал отображаться поверх левой оформительской колонки нам надо сдвинуть его на 80% влево от ширины страницы. Так как ширина правой колонки 20% от страницы, то мы будем двигать на четыре ширины правой колонки влево или на 300% от ширины правой колонки — left:-400%;

    После того как мы сдвинули левый див с контентом его место в правой колонке занял центральный див. Его мы должны сдвинуть только на 60% относительно ширины страницы или на три ширины правой колонки. Сдвинем центральную колонку на 300% влево.

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

    Еще немного пояснений

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

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

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

    Полное руководство по центрированию DIV-элемента

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

    Простое центрирование DIV-элемента на странице

    Этот метод будет отлично работать во всех браузерах.

    Значение auto в свойстве margin устанавливает левый и правый отступ на все пространство, доступное на странице. Здесь важно запомнить, что у центрируемого div-элемента обязательно должно быть установлено значение width .

    Центрируем DIV внутри DIV-элемента старым способом

    Этот метод div выравнивания по центру будет работать во всех браузерах.

    Внешний div может быть помещен как угодно, но у внутреннего блока div обязательно должна быть указана ширина ( width ).

    Центрируем DIV внутри DIV-элемента с помощью inline-block

    В этом методе центрирования div внутри div необязательно указывать ширину внутреннего элемента. Он будет работать во всех современных браузерах, включая IE8 .

    Свойство text-align работает только в inline-элементах . Значение inline-block позволяет отобразить внутренний div в качестве inline-элемента , а также в качестве блока ( inline-block ). Свойство text-align во внешнем div-элементе позволит нам центрировать внутренний div .

    Центрируем DIV внутри DIV-элемента горизонтально и вертикально

    Здесь для центрирования div по центру страницы используется margin: auto . Пример будет работать во всех современных браузерах.

    У внутреннего div-элемента должна быть указана ширина ( width ) и высота ( height ). Метод не сработает, если у внешнего div-элемента будет фиксированная высота.

    Центрируем DIV по нижней границе страницы

    Здесь для расположения div по центру по вертикали используется margin: auto и абсолютное позиционирование для внешнего элемента. Метод будет работать во всех современных браузерах.

    У внутреннего div должна быть установлена ширина. Пространство внизу страницы регулируется с помощью свойства bottom внешнего div . Вы также можете центрировать div по верхней границе страницы, заменив свойство bottom на свойство top .

    Центрируем DIV на странице вертикально и горизонтально

    Здесь, чтобы выровнять div по центру, снова используется margin: auto и абсолютное позиционирование внешнего div . Метод будет работать во всех современных браузерах.

    У div-элемента должна быть установлена ширина ( width ) и высота ( height ).

    Делаем адаптивное центрирование DIV-элемента на странице

    Здесь для выравнивания div по центру средствами CSS мы делаем ширину div-элемента адаптивной, чтобы она реагировала на изменения размеров окна. Этот метод работает во всех браузерах.

    У центрированного div-элемента должно быть установлено свойство max-width .

    Центрируем DIV внутри элемента с помощью свойств внутреннего блока

    Внутренний div-элемент здесь адаптивен. Этот метод расположения div внутри div по центру будет работать во всех браузерах.

    У внутреннего div должно быть установлено свойство max-width .

    Центрируем два адаптивных div-элемента рядом друг с другом

    Здесь у нас два расположенных рядом адаптивных div-элемента. Этот метод установки div по центру экрана будет работать во всех современных браузерах.

    Здесь у нас несколько элементов с примененным свойством inline-block , расположенных внутри центрированного контейнера. В этом примере также используются медиа-запросы CSS ; то есть, если размер экрана меньше 600 пикселей, то свойство max-width как для левого, так и для правого div-элемента устанавливается на 100%.

    DIV-элемент, центрированный при помощи Flexbox

    Здесь мы располагаем CSS div по центру с помощью Flexbox . Он предназначен для того, чтобы облегчить процесс разработки дизайна пользовательских интерфейсов. Этот модуль поддерживается Chrome 38+ , IE11 , Microsoft Edge , Firefox 38+ , Safari 9+ , Opera 30+ , iOS Safari 9+ , а также Android Browser 40+ .

    Значение свойства height может быть любым, но только больше размера центрированного div-элемента.

    Данная публикация представляет собой перевод статьи « THE COMPLETE GUIDE TO CENTERING A DIV » , подготовленной дружной командой проекта Интернет-технологии.ру

    Vavik 96

    Интернет дайджест для вебмастеров и фотографов

    Адаптивная верстка. Текст в два столбца.

    Сегодня мы рассмотрим очень простой элемент адаптивной верстки, такой, как текст в два столбца. Поняв смысл, вы сможете делать и три и четыре столбца, которые, достигая заданной минимальной ширины уходят вниз. Естественно, к тексту можно добавлять картинки, да и абсолютно любые элементы дизайна.
    Естественно, в столбцы или колонки, можно добавлять не только текст, но и любой другой контент. Еще такую адаптивную верстку блоков называют плавающей. Из-за чего? Читайте дальше и все поймете.
    Приведенные ниже примеры текста в два столбца растягиваются на всю ширину контейнера. В моем случае это примерная область контента в блогах WordPress.

    Текст в два столбца из редактора WordPress

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

    Адаптивная верстка. Текст в два столбца без картинок

    Можно добавить кнопку в редактор

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

    Ну и давайте разберемся по очень простому коду адаптивной верстки двух столбцов.
    Вот привожу исходник HTML текста в двух столбцах :

    div — левая колонка с классом .left-col

    div — правая колонка с классом .right-col

    div — специальный блок для отмены float . См. далее.

    CSS код адаптивной верстки текста в два столбца:

    .left-col и .right-col задается ширина не фиксированная, а в процентах — width: 50%; относительная для того, чтобы столбцы растягивались относительно ширины контейнера.

    Но, при достижении 180px , каждый столбец больше не уменьшается.
    min-width: 180px; — задан минимальный размер колонок.

    Естественно, эти размеры можно менять по своему усмотрению. Три столбца, значит ставьте width: 33.3333%; .

    height: auto; — высота адаптивных столбцов, она автоматически меняется в зависимости от объема контента в столбцах.

    box-sizing: border-box; — желательно прописывать при адаптивной верстке. Свойство, при котором все отступы padding , рамки border и т.д, вписываются в заданный размер контейнера. В нашем случае .left-col и .right-col .

    float: left; — свойство, при котором столбцы с текстом выстраиваются горизонтально по очереди. Количество столбцов зависит от заданных ранее относительных размеров. У нас width: 50%; — два столбца.

    @media (max-width: 479px) — так называемая точка прерывания. Это значит, что на мониторах, менее 479px каждый столбец растянется на всю ширину монитора. В коде задано:

    .left-col и .right-col

    Точки прерывания

    Используя точки прерывания можно с легкостью управлять размерами элементов для разных мониторов.

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

    Сложно? Только на первый взгляд. Скачайте исходник и меняя параметры, посмотрите логику. Ну или просто скопируйте код исходника и замените текст на свой.

    Адаптивная верстка. Текст в два столбца с картинками

    Естественно, в адаптивные столбцы можно добавлять любые элементы. Рассмотрим пример добавления к адаптивным столбцам с текстом картинки.

    Для начала сделаем сами картинки адаптивными. Для этого присвоим им какой-то класс и зададим ширину 100%.
    Стили CSS для адаптивных картинок

    Картинки желательно подбирать 500px в ширину, что-бы на маленьких мониторах они растягивались на всю ширину экрана и выглядели красиво.
    HTML разметка для адаптивных столбцов с картинками:

    Здесь просто добавлены картинки.
    Пример

    Как разместить две части текста на одному уровне с разных сторон страницы?

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

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

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

    Решение будет такое, подготовим разметку, это три дива с текстом, первым двум из которых дает соответствующие классы left и right .

    Для размещения на одном уровне используем свойство float , для абзаца с классом left оно примет значение left , для right соответственно right . Так как по-умолчанию абзацы занимают всю ширину так же необходимо задать половинную ширину обоим и небольшой отступ слева для абзаца с классом right (Важно, чтобы по ширине, внешним и внутренним отступам абзацы были вровень с шириной страницы):

    Результат вы можете посмотреть на демо-странице (Так же был добавлены свойства для body , чтобы текст не расползался по странице и выводился в центре):

    Статьи:

    Мы подготовили новое пакетное предложение по разработке сайтов для нотариусов. Если Вы — частный нотариус, то создание сайта у нас позволит вам:

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

    Итак, сегодня — пример трехколоночной резиновой (процентной) верстки с шапкой и подвалом.

    Код

    CSS

    Как оно выглядит

    Примечания

    header — шапка

    wrapper — контейнер для основного текстового поля

    content — основное текстовое поле

    navigation — навигация

    extra — другая информация

    footer — подвал

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

    Цукерберг рекомендует:  Разработка игр. С чего начать
    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих
    Табличная верстка Блочная верстка