Обтекание diva c position:absolute

@cevil · Регистрация: 07.04.2014

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

Добрый вечер Форумчане! При изучении резиновой верстки, возник вот такой вопрос:
Есть div с position:ablolute, (эт который с рамкой желтого цвета) блок с навигацией, который например прилеплен к верхнему правому краю, всю остальную область занимает текст. Вот как сделать чтоб этот текст обтекал этот блок, а не был под ним?

@Lazy_Den · 04.11.2014, 20:01

cevil, во-первых, ваш вопрос скорее из области HTML/CSS, но это не суть важно. Во-вторых, для решения вашей конкретной задачи, нужно видеть и разметку, и стили.

@cevil · 04.11.2014, 22:57 **[ТС]**

Мда не обратила внимания на раздел в котором разместила вопрос.

Добавлено через 5 минут
Что касается кода

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
<body>
<div id="page-wrap">
    <div id="page">
    <div id="body">
           
 
    <div id="content">
        <div id="content-block">            
            <div class="centr">
                <div class="yellow">
                    <ul >
                        <li><img src="img/point.png" alt="point"><a href="#">Наши преподаватели</a><img src="img/point.png" alt="point"></li>
                        <li><img src="img/point.png" alt="point"><a href="#">Учебный план</a><img src="img/point.png" alt="point"></li>
                        <li><img src="img/point.png" alt="point"><a href="#">Игры учеников</a><img src="img/point.png" alt="point"></li>
                        <li><img src="img/point.png" alt="point"><a href="#">Где мы находимся</a><img src="img/point.png" alt="point"></li>
                    </ul>
                </div>
            <h2> GAME DEVELOPERS ACADEMY </h2>
 
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non porttitor ipsum. Maecenas gravida gravida sapien, ut viverra arcu ornare eu. Sed condimentum eleifend nibh, quis rutrum turpis vulputate eleifend. Vivamus gravida lacus id mauris eleifend sed consequat mauris egestas. Etiam eget velit libero. Etiam tincidunt, nunc eu sodales volutpat, sem est rhoncus tellus, non auctor sem neque eget tellus. Integer sed mi vestibulum risus dignissim molestie. Quisque rhoncus vulputate mi, in posuere lorem molestie ac. Donec bibendum sem nec leo aliquet interdum.Cras pulvinar tincidunt vulputate. Nulla mauris metus, ullamcorper a egestas ac, cursus nec tortor. Duis ut mi odio. Duis augue diam, hendrerit vitae aliquet et, egestas et tellus. Nullam eu leo erat. Aliquam egestas aliquam nibh, eget congue mi aliquam eget. Aliquam massa felis, sodales vitae viverra at, aliquam pretium purus. Phasellus nec turpis arcu, vitae mattis orci. Nullam mauris ligula, consequat non condimentum in, lacinia vel odio. Pellentesque vitae congue nisl.
 
 
            </div>
        </div>
 
        <!--- menu-->
            <div class="sidebar" role="complementary">
                <div class="wrapper">
                    <div class="design-selection" id="design-selection">
                    <img src="img/logo.png">        
                    <ul class="cbp-vimenu">
                        <li><a href="#">О нас</a></li>                  
                        <li><a href="#">Свежие новости</a></li>
                        <li><a href="#">Игры учеников</a></li>
                        <li><a href="#">Наши мероприятия</a></li>    
                        <li><a href="#">Галерея</a></li> 
                        <li><a href="#">База знаний</a></li>
                        <li><a href="#">Контакты</a></li>       
                    </ul>   
                    </div>
                </div>
            </div>
         <!--- menu-->
    </div>
 
 
    </div>     
    </div>
</div>
</body>

стили

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
65
66
67
68
69
70
71
72
73
74
75
76
77
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 100%;
}
 
#page-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
 
#page {
    max-width: 1900px;
    min-width: 450px;
    height: 100%;
    margin: 0 auto;
   
}
 
#body {
    width: 100%;
    height: auto;
    min-height: 100%;
    margin: 0;
    padding: 0;
   
}
 
#content {
    width: 100%;
    margin: 0;
   
}
 
#content-block {
    margin: 0 0 0 277px;
 
}
 
/* left menu*/
.sidebar {
    position: absolute;
    top: 0px;
    left: 0;
    width: 277px;
    height: 100%;
    
    }
.sidebar .wrapper {
    font: 1.2em courier, monospace;
    padding: 10px;
    width: 250px;
    height: 100%;
    float: right;
    position: fixed;
    background: url('../img/pattern.jpg') repeat-y center;
 
    }
.centr{
    position: relative;
    min-width: 695px;
} 
.yellow{
    position: absolute;
    right: 0; top: 0;
    border: 8px solid #ffdc4c;
    text-align: center;
    padding-top: 10px;
    width: 12em;
    overflow: hidden;
    float: left;
}

@Lazy_Den · 04.11.2014, 23:30

cevil, абсолютное позиционирование тут неуместно. Для резиновой верстки, в вашем случае, вполне можно использовать псевдотабличные свойства:
display: table | table-row | table-cell;
Они поддерживаются начиная с IE8 и во всех остальных нормальных браузерах. По сути, нам достаточно такой разметки:

CSS
1
2
3
4
5
6
7
<div class="table">
    <div class="table-row">
        <div class="table-cell"></div>
        <div class="table-cell"></div>
        <div class="table-cell"></div>
    </div>   
</div>

Классы я назвал так, как должно быть определено свойство "display" для каждого. Посмотрите пример в действии

Добавлено через 2 минуты
P.S. Без второго дочернего элемента table-row можно обойтись, но без него могут быть баги в Safari 3.1. Хотя, эта версия устарела и теоретически её можно сбросить со счетов.

Добавлено через 3 минуты
Еще пара советов. Я заметил, что вы используете изображения в качестве оформления или разделителей в пунктах меню. Если дизайн позволяет, то лучше использовать псевдоклассы ":before, :after" или псевдоэлементы для современных браузеров "::before, ::after"

@cevil · 04.11.2014, 23:39 **[ТС]**

Никогда прежде не использовала display: table. Весьма удобно!!!
Но если я правильно поняла, обтекание текста внизу желтого блока не будет, т.к это три разные ячейки.

Добавлено через 1 минуту
На счет псевдокласов ":before, :after" возьму на заметку, спасибо! А то в вопросах верстки совсем сырые знания еще

@Lazy_Den · 04.11.2014, 23:51

Сообщение от cevil

обтекание текста внизу желтого блока не будет

Для обтекания желтого блока, не нужно разделять на три колонки, а достаточно этому блоку задать свойство float: right; (смотрим), но при этом блок должен находится первым в родительском блоке.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@cevil 12 / 12 / 5 Регистрация: 07.04.2014 Сообщений: 174

	Обтекание diva c position:absolute 04.11.2014, 19:39. Показов 3357. Ответов 5 Метки нет (Все метки) Добрый вечер Форумчане! При изучении резиновой верстки, возник вот такой вопрос: Есть div с position:ablolute, (эт который с рамкой желтого цвета) блок с навигацией, который например прилеплен к верхнему правому краю, всю остальную область занимает текст. Вот как сделать чтоб этот текст обтекал этот блок, а не был под ним? Изображения 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	04.11.2014, 20:01
	cevil, во-первых, ваш вопрос скорее из области HTML/CSS, но это не суть важно. Во-вторых, для решения вашей конкретной задачи, нужно видеть и разметку, и стили. 0

@cevil 12 / 12 / 5 Регистрация: 07.04.2014 Сообщений: 174
	04.11.2014, 23:39 [ТС]
	Никогда прежде не использовала display: table. Весьма удобно!!! Но если я правильно поняла, обтекание текста внизу желтого блока не будет, т.к это три разные ячейки. Добавлено через 1 минуту На счет псевдокласов ":before, :after" возьму на заметку, спасибо! А то в вопросах верстки совсем сырые знания еще 0