Подскажите по верстке. Три контейнера в ряд.

напрмер, типо так:

- все три контейнера завёрнуты в блок-враппер

- у блока-враппера паддинги слева и справа на ширину боковых блоков + отступ

- левый (1) блок имеет флоат влево и отрицательный марджин влево на ( ширина + отступ )

- правый (3) блок имеет флоат вправо и отрицательный марджин вправо на ( ширина + отступ )

- центральный (2) сам займёт всё свободное место между паддингами враппера

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

ну и враппер либо на всю ширину своего конейнера (по умолчанию), либо с заданной шириной...

АПД: для контроля внутренним блокам лучше задать box-sizing: border-box

Так ну роде горизонтально все встало на свои места. Но центральный не меняет размер если убираются боковые блоки.

так паддинги враппера мешают.

есЧо раз: такая конструкция была придумана, что бы центральный блок с контентом можно было поставить выше (перед) блоков со служебными колонками - типа для ботов "важное ближе к началу". если с этим не заморачиваться, то все решается обычными плавающими блоками колонок.

Если завернуться, то как сделать середину резиновой на данном примере?

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

Не проверял, но должно работать.

#left{width:25%; float:left}

#rigth{width:25%; float:right}

#middle{width:50%;float:left}



#left + #right + #midde {width:50%}

#right + #midde {width:75%}

#left + #midde {width:75%}

<div wrap>

  <div #left>

  <div #right>

  <div #middle>

<div wrap>

  <div #left>

  <div #middle>

<div wrap>

  <div #right>

  <div #middle>

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

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

Да но падинг врапера мешает ей растянуться...

---------- Добавлено 10.01.2014 в 12:37 ----------

Ну вот не знаю, как то так получилось... :)

но ничто не мешает расстянуться самому врапперу ;) или вы придумали себе особую "ризиновость". это шаблон для 2-х колонок и контента. нужен вариант с одной колонкой - рисуете враппер с одним паддингом.

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