html/css: 3 колонки жидкость/жидкость плавающая; плавающие столбцы рядом с столбцом cendered, отбрасывая стороны до следующей «линии» при поплавке?

Question

Итак, это мой первый Q в stackoverflow, и, наконец, «создав» учетную запись, я вижу довольно большой список «похожих» вопросов в свой собственный ... но я почти злоупотреблял Google, чтобы найти ответ , и безрезультатно; так, здесь.

Я довольно новичок в html и css, но был агрессивно и навязчиво, быстро приобретая как можно больше знаний об этом, за последние шесть дней, за последние < 2 месяца, и я чувствую, что делаю большой прогресс.

Однако, что я понял, я хочу сделать с моей компоновкой, я, похоже, не смогу достичь.

Все, я бы предположил, знают о «жидких» макетах и ​​явно невероятно популярном «святом граале» 3-х столбчатых макетах.

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

Вот цель:

Я хочу, чтобы мое основное содержание в середине, обернутое 2 «боковая панель» колонки, и я хочу все это «жидкость» от полного Реза, весь путь до 320 пикселей в ширину.

Однако для целей SEO, я хочу, чтобы мой столбец «основного содержания» (в середине) 1 в дереве DOM, и я хочу, чтобы моя боковую планку для:

первого) термоусадочной жидко с шириной страницы и затем 2nd), поскольку страница становится непомерно узкой, я хочу, чтобы колонка «основного содержимого» (средняя) была «привязана» влево, оставалась сверху и была на 100% шириной, а 3rd) боковые полосы «привязать», «под» колонкой основного контента, каждая из которых занимает 50% ширины,

так, что: все 3 столбца ВСЕГДА занимают всю ширину страницы, а когда боковые панели «привязываются», это такой же ширины, как и «средний» столбец ,

что-то вроде этого:

|2222111111113333| 
|________________| 

|222111111333| <-- 
|____________| 

|22111133| <-- 
|________| 

*snap*(a) 

|1111| <-- 
|2233| 
|____| 

|11| <-- 
|11| 
|22| 
|33| 

или: оснастке (б)

|111111| <-- 
|222333| 
|______| 

|111| <-- 
|111| 
|222| 
|333| 

|11| <-- 
|11| 
|11| 
|22| 
|2_| 
|33| 
|3_| 

Посмотрите, что я клоню?

Вот проблема:

Я попробовал все, что я могу думать или искать о, чтобы попробовать ... и, кажется, там просто «нет пути» для CSS, чтобы сделать «DOM: 1-я/средняя "колонка остается как посередине, так и сверху, при этом сохраняя оба боковых стержня симметричными, а также сохраняя пространство и сохраняя все 3 столбца в красивой, аккуратной коробке во все времена.

Мне удалось сделать средний столбец на вершине и на первом месте в DOM, но это приводит к хаосу и беспорядку в боковые столбцы, так как # 2 должно быть внутри div с №1, для 1/mid, чтобы остаться на вершине, но поместив # 3 в этот div, все болтается.

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

Если кто-то точно знает, что я имею в виду и пытается сделать, и знает:

А) является ли это даже возможно

B), как это сделать

Я очень люблю знать ... потому что я действительно хотел бы, чтобы выйти за пределы этого один маленький (читай: ОГРОМНЫЙ) вопрос, и продолжайте свой путь к мировому господству.

TL; DR:

хотят сделать "| 213 |" стать:

|1| 
|2| 
|3| 

без него превращается в это:

|_1_| 
|2__| 
|__3| 

или это:

|_1_| 
|2_3| 
|___| 

в любой точке между макс и мин экрана.

Возможно ли это сделать? Или мне просто (отказаться и) настроить мою стратегию макета и двигаться дальше?

Answer 1

Я думаю, что это такая вещь, что вы ищете:

http://jsfiddle.net/grc4/kcX5n/

Он использует JQuery, чтобы изменить макет страницы при изменении размеров окна. Другой подход может заключаться в использовании css3-медиа-запросов, но я не уверен, как вы измените порядок элементов (от 213 до 123).

Answer 2

старый вопрос, но я думаю, что это довольно простой CSS:

#col1{float:right} 
#col2{float:left} 
#col3{float:right}