[SergeyNetIt]

Как решить такую проблему: Есть общий блок в котором находится три блока подряд с абсолютным позиционированием и один с низу с position:relative.
Почему блоки с абсолютным позиционированием съезжают со своего места. Нижний блок наезжает на верхний блок, если нет контента в четвертом блоке с position:relative
Блок div с классом top - красного цвета.
Блок div с классом bottom - синего цвета
Блок div с классом center - черного цвета
А в самом блоке content будет находится контент
В реальном примере в блоке top будет голубенький градиент прозрачный
В блоке div с классом bottom - другой голубой прозрачный градиент
А блок center будет имеет background по repeat-y и будет осуществлять плавный переход с верхнего блока на нижний.
А в блоке content будет сам контент
Первым блоком должен быть всегда top, потом center, а bottom. Но еслм в блоке content нет контента все сьзжает
Вот исходники http://jsfiddle.net/P9V74/

[kuzmi4]

Я вот это добавил вместо текста

Код HTML:

 

. текста нет а блоки на месте.

[SergeyNetIt]

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

[kuzmi4]

SergeyNetIt,
Да в Вашем изначальном примере синий сверху. Цвета поменяйте.
--
А лучше в #content высоту пропишите - height:100%;
(у меня получилось так)

[SergeyNetIt]

kuzmi4, При чем тут цвет. Все там в цветах правильно. Сверху должен быть красный блок top. Вот код .

Код HTML:

top{
				width:300px;
				position:absolute;
				height:100px;
				top:0;
				left:0;
				background:#f00; //цвет красный
			}

Я же вам говорю, что если контента мало, блоки съезжают и меняются местами. А если поместить в content контента больше за высоту блока top, bottom - все становится на свои места.

[kuzmi4]

SergeyNetIt, Я Вам и говорю, у айди контент (id="content") нет высоты. Вот чехарда и получается. Назначите ему какаю нибудь высоту. больше 300px (чтоб средний блок было видно.)или, как я предложил 100%
Вот скрин, с высотой 310 пикселей и без букав

А здесь для наглядности блоки сместил относительно левого края на разное растояние, а блок класс контент (class="content") уменьшил и покрасил зеленым.

[SergeyNetIt]

kuzmi4, Вот смотри, я поставил id=content высоту 100% и добавил немного контента в class="content" и вот, получается как я хотел http://joxi.ru/B3YXUxjKTJDeDTiOYWY
А теперь я уберу немного контента в блоке class="content" и результат совсем не тот http://joxi.ru/VHYXUxjKTJAJDuz31dk
Теперь синий блок вверху, а красный снизу. В первом случае наоборот и такой вариант правильный
http://jsfiddle.net/P9V74/6/

---------- Сообщение добавлено 21:14 ---------- Предыдущее 21:10 ----------

SergeyNetIt, или я наверное забыл указать для html,body{
height:100%;
}
а уже потом указал для id=content - min-height:100%;
Вот, так я понимаю правильно должно быть http://jsfiddle.net/P9V74/9/
или нет? и из за чего без высоты такое происходит?

[kuzmi4]

Вот, так я понимаю правильно должно быть

Ну тебе виднее, хозяин барин.
html,body - браузеры автоматом присваивают 100% высоты, jsfiddle.net этого не понимает.
min-height:100% ??? почему минимальная высота? достаточно height:100%, у если работает то ОК
--
Объясни зачем эти три блока ввобще нужны?

В реальном примере в блоке top будет голубенький градиент прозрачный
В блоке div с классом bottom - другой голубой прозрачный градиент
А блок center будет имеет background по repeat-y и будет осуществлять плавный переход с верхнего блока на нижний.
А в блоке content будет сам контент

Я так понимаю нужна подложка из градиента, а сверху текст??? или в центральном блоке будет рисунок?

[SergeyNetIt]

kuzmi4,в трех блоках будет подложка
в блоке top один прозрачный голубенький градиент
в блоке bottom внизу другой голубенький градиент
в блоке center повторяющийся фон, а в самом уже content будет находится контент