Вылазит вниз контейнер вместе с контентом и колонками из враппера

11.10.2013, 21:34. **Показов** 1488. **Ответов** 2

Студворк — интернет-сервис помощи студентам

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<title>NailDesignTumen</title>
<link rel="stylesheet" style="text/css" href="common.css"
</head>
<body>
    <div id="wrapper">
        <div id="header">
    Новаторством в нейл-арте стала скульптурная лепка на ногтях - творение тщательно крепится к ногтю, а форма зависит от фантазии мастера и вашего выбора: можно посадить цветок, дерево или поселить человечка.
        </div>
        <div id="middle">
            <div id="container">
                <div id="content">
                Beauty Tips
Существует всего два вида наращивания ногтей с помощью акрила:
наращивание на типсу и наращивание на форму.
Акриловое наращивание на типсу позволяет даже на очень коротких ногтях сделать красивый маникюр. На подготовленный заранее ноготь типсу крепят с помощью специального клея, а затем выравнивают грань между накладной пластинкой и ногтем с помощью нескольких шариков акрила, уложенных в специальную, подобранную по размеру форму. Спустя 2-3 минуты акрил застывает, после чего его подпиливают, шлифуют и покрывают лаком.
Наращивание на форму предполагает использование специальной формы,
которая устанавливается под выступающий край собственного ногтя. На обработанный ноготь также накладывается несколько шариков акрила, из которых мастер формирует пластинку с помощью кисти. После того, как акрил затвердеет, ноготь подпиливают и шлифуют.
И тот, и другой вид наращивания требует определённого мастерства и сноровки, поэтому очень важно обратиться к хорошему профессионалу. Тогда результат наверняка доставит большую радость.
    Перед акриловым наращиванием собственный ноготь подвергается
обработке, которая делает его более тонким и уязвимым.
Правила ухода за ногтями при акриловом наращивании
    Не менее двух раз в день следует выполнять массаж кутикулы с питательным маслом, чтобы питать собственный ноготь.
 
    Акриловое наращивание ногтей не нанесёт существенного вреда собственным ногтям, если время от времени снимать их, а не носить круглый год. Это позволит ногтям отдохнуть, набраться сил и нормально перенести следующий процесс наращивания.
 
                </div>
                <div id="sidebarleft">
                 <p>Гель не пропускает кислород, но ноготь под ним чувствует себя комфортно и растёт так же, как и обычно. Благодаря такому свойству геля, ногти из него могут прожить до 4 месяцев при условии регулярной коррекции.
    В отличие от акрила, гель не обладает неприятным запахом.
    Гелевые ногти имеют глянцевый блеск, поэтому можно вовсе не наносить на них лак.
    Гель застывает только под воздействием ультрафиолета, поэтому при таком наращивании нет необходимости торопиться, опасаясь быстрого затвердевания массы.
    Гель более эластичен, чем акрил, поэтому при поломке гелевого не так серьёзно травмируется собственный ноготь.
   Благодаря своей прозрачности, гель даёт возможность создания самых необычных композиций внутри ногтя, при этом рисунок не сотрётся и не поблекнет.
   На современном рынке можно найти гели самого разного цвета и оттенка. Гелевые ногти выглядят привлекательно сами по себе, даже без лакового покрытия, но при желании на них можно нанести любой рисунок или наклеить стразы.
Гелевые ногти позволяют создавать на них самые замысловатые композиции, поскольку на них прекрасно ложится абсолютно любой лак, а также прекрасно держится клей. Такие ногти могут иметь самую разную форму и длину.
  Одни считают, что акрил прочнее и лучше, другие доказывают, что гель намного безопаснее, приятнее, красивее и т. д.
  Так же, как и акриловые ногти, маникюр на основе геля можно выполнять на форму и на типсу.
Существует также однофазное, двухфазное и трёхфазное наращивание ногтей с помощью геля.
    При однофазном наращивании на ноготь наносится всего один слой гелевого покрытия.
    При наращивании ногтей в две фазы, на ноготь сначала наносится защитный слой геля, а затем – основной.
    Самый надёжный способ гелевого наращивания искусственных ногтей – трёхфазный, когда гелевый ноготь создаётся в три фазы, каждая из которых завершается обработкой ультрафиолетовым светом. Трёхфазное наращивание позволяет сделать ногти максимально прочными.</p>
                </div>
                <div id="sidebarright">
                Прочность акрила и блеск геля
Характерной особенностью и преимуществом акрила является его прочность. Гелевое наращивание ногтей позволяет создать эффект прозрачного ногтя и не требует сильного спиливания собственной пластины ногтя. Кроме того, как известно, слой геля часто наносят на повреждённые ногти в качестве укрепляющего средства, для того, чтобы сделать более сильной саму ногтевую пластину. Сочетанием этих двух качеств и характеризуется акрилово-гелевое смешанное наращивание. С помощью комбинирования слоёв геля и акрила можно создать настоящие шедевры маникюрного искусства.
    Мастера любят смешанную технологию наращивания как раз за то, что она даёт гораздо больше возможностей в плане дизайна, позволяет экспериментировать с самыми смелыми творческими фантазиями. Существует несколько различных технологий смешивания геля и акрила при создании искусственного ногтя.
   Сегодня можно назвать два основных вида комбинирования акрилового и гелевого покрытий. Они отличаются порядком, количеством слоёв и техникой их нанесения. Смешанное наращивание может производиться либо на акриловой основе, либо на основе геля.
   Покрытие акриловых ногтей с помощью геля -  в таком случае основное наращивание выполняется с помощью акрила (ноготь полностью выстраивается и опиливается), а гелевый слой играет роль блестящего покрытия, которое делает ноготь глянцевым и избавляет от необходимости наносить на него
лак.
   Второй вид комбинированного наращивания ногтей – это создание акриловой композиции на гелевом ногте. В качестве основы выступает гель, на который наносятся элементы из акрила -  тонировка, лепка и прочие виды
декорации ногтей (чаще всего это все-таки лепка).
   Следующий вариант комбинации -  гелевый ноготь с акриловым дизайном внутри (обычно это лепка). Для того, чтобы получить такой необычный дизайн, необходимо запастись терпением. За такую кропотливую и тонкую
работу берутся только высококвалифицированные мастера.
   Акрилово-гелевые ноги: самое стильное наращивание
   Отличительными чертами смешанного наращивания любого типа являются
длительность самого процесса, тонкость работы и особый стиль..
                </div>
            </div>  
        </div>
    </div>  
    <div id="footer">
    Прокалывание ногтей, как правило, искусственных, так же актуально , как аппликация. Внутрь проколотого ногтя вставляют гвоздики, кнопки, сережки, цепочки и закрепляют их. Используется и бижутерия и драгметаллы.
    </div>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
body, html{
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    }
#wrapper{
    margin:0;
    padding:0;
    background:#384;
    min-height:100%;
    min-width:1000px;
    height:100%;
    height: auto !important;
    overflow:hidden;
    }
#header{
    margin:0;
    padding:0;  
    background:#902;
    height:150px;
    }
#middle{
    margin:0;
    padding:0;
    background:#975;
    height:100%;
    }
#container{
    margin:0;
    padding:0;  
    background:red;
    height:100%;
    }
#content{
    padding:0;
    margin:0 270px 0 270px;
    background:yellow;
    position:absolute;
    }
#sidebarleft{
    margin:0;
    padding:0;
    width:250px;
    background:#66d;
    position:absolute;
    left:0;
    }
#sidebarright{
    margin:0;
    padding:0;
    width:250px;
    background:#ccd;
    position:absolute;
    right:0;
    }   
#footer{
    padding:0;  
    height:100px;
    margin:-100px auto 0;
    background:green;
    position:absolute;
    bottom:0px;
    }

@Starpom · 11.10.2013, 21:44

http://csstemplater.com/
Думаю этот ресурс поможет решить проблему

@lastfin · 13.10.2013, 21:06

уберите у сайдбаров position:absolute и замените на float:left, float:right.
при абсолютном позиционировании элементы выносятся из нормального потока и получаются такие странные вещи.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Starpom 0 / 0 / 0 Регистрация: 11.10.2013 Сообщений: 19
	11.10.2013, 21:44
	http://csstemplater.com/ Думаю этот ресурс поможет решить проблему 0

@lastfin 10 / 10 / 1 Регистрация: 06.02.2012 Сообщений: 52
	13.10.2013, 21:06
	уберите у сайдбаров position:absolute и замените на float:left, float:right. при абсолютном позиционировании элементы выносятся из нормального потока и получаются такие странные вещи. 0