Правая колонка фиксированная

@Heleg · Регистрация: 23.10.2011

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

как ?

@gulliver · 11.05.2012, 13:34

width: n%
width:300px

@Heleg · 11.05.2012, 13:37 **[ТС]**

gulliver, wtf n%???

@gulliver · 11.05.2012, 13:38

я так понял ты хочешь левый блок динамический а правый статический ?

@Heleg · 11.05.2012, 13:42 **[ТС]**

gulliver, угодал

@i_masik · 11.05.2012, 13:52

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
<html>
    <head>
        <style>
            #left{
                width:auto;
                float:left;
                height:400px;
                background-color:red;
            }
            #right{
                height:400px;
                width:300px;
                float:left;
                background-color:black;
            }
        </style>
    </head>
    <body>
        <div style="width:1000px;">
        <div id="left">Левый блок</div>
        <div id="right">Правый блок</div>
        </div>
    </body>
</html>

вот что-то наверстал

@gulliver · 11.05.2012, 14:12

Мне кажется это не совсем то, у тебя оба дива статические... а должен быть динамический 1 из них.

@i_masik · 11.05.2012, 14:16

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

Мне кажется это не совсем то, у тебя оба дива статические... а должен быть динамический 1 из них.

Посмотрите внимательней.
Это просто пример.
И левый блок динамический!

@gulliver · 11.05.2012, 14:19

на картинке у Heleg чу чуть по другому) левый динамический (во весь экран ),а вот правый фиксированный размер.
В общем, надо спросить у Heleg'a то или нет?

P.s пока сам думаю

@i_masik · 11.05.2012, 14:22

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
<html>
<head>
<style>
#left{
width:auto;
float:left;
height:400px;
background-color:red;
}
#right{
height:400px;
width:300px;
float:left;
background-color:black;
}
</style>
</head>
<body>
 
<div id="left">Левый блок</div>
<div id="right">Правый блок</div>
 
</body>
</html>

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

@gulliver · 11.05.2012, 14:25

у меня при уменьшение экрана черный блок падает вниз ^^ (в последнем коде)

@Heleg · 11.05.2012, 17:40 **[ТС]**

i_masik, важно то, чтобы левый блок забирал под себя всё оставшееся пространство, как с width: auto. но плавающий элемент игнорируется левым блоком, поэтому возникает такая проблема

Добавлено через 8 минут
и да, таблицы не в счёт

@gulliver · 11.05.2012, 17:43

я в свое время верстал что то подобное, вот посмотри.(там много лишнего, но все же,эффект вроде работает именно так.)
Хотя не идеально... , но все же.

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
69
70
71
72
73
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
 
    <head>
        <title>  </title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" href="css/indexstyle.css">
    </head>
    
    <body>
        <div id="main">
            <div class="main_contain">
                
                
                <div class="main_cont">
                
                    <div class="lmenu">
                        <h2 class="main_menu">MAIN MENU</h2>
                        <ul class="lmul">
                            <li><i>Home</i></li>
                            <li>Joomla! Overview</li>
                            <li>Joomla! License</li>
                            <li>More about Joomla!</li>
                            <li>FAQ</li>
                            <li>The News</li>
                            <li>Web Links</li>
                            <li>News Feeds</li>
                        <ul>
                        <hr class="hrka" >
 
                        <h2 class="main_menu1">RESOURCES</h2>
                        <ul class="lmul1" type="disc">
                            <li>Joomla! Home</li>
                            <li>Joomla! Forums</li>
                            <li>Joomla! Documentation</li>
                            <li>Joomla! Community</li>
                            <li>Joomla! Magazine</li>
                        </ul>
                    </div>
                                        
                            <div class="maincont">
                                <div class="mcnt">
                                    <h2>Welcome to the Frontpage</h2>
                                    <hr class="hrka1">
                                    
                                        <div class="cntx">
                                        <h4>Joomla! Community Portal</h4>
                                        <p class="date"> 07.07.2007 09:54 | Администратор </p>
                                        <p class="textincntx"> <u>Joomla! Community Portal is now online.</u> There, you will find a constant source of information about the activities of contributors powering the Joomla! Project. Learn about Joomla! Events worldwide, and see if there is a Joomla! User Group nearby.</p> <br>
                                        <p class="textincntx1">
                                        The Joomla! Community Magazine promises an interesting overview of feature articles, community accomplishments, learning topics, and project updates each month. Also, check out JoomlaConnect™. This aggregated RSS feed brings together Joomla! news from all over the world in your language. Get the latest and greatest by clicking <a href="#" class="here">here.</a></p>
                                        </div>
                                </div>
                                        </div>
                                    
                            </div>
                
                <!--
                            <div class="rmenu">
                            <h2>right menu</h2>
                            
                            </div> -->
                </div>
            </div>
        </div>
        
        </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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
*{ margin:0; padding:0;}
 
#main{
color:white;
font: normal 18px Tahoma, Arial;
min-width:1045px;
}
 
.main_contain{
width:100%;
margin:0;
padding:0;
}
 
 
.main_cont{
margin:0;
padding:0;
}
 
.lmenu{
background:#e6e6e6;
width:200px;
padding:20px 0 15px 35px;
float:left;
}
 
.lmul{
color:black;
font: normal 13px Tahoma,Arial;
margin:0px 20px 20px 0;
}
 
.lmul li{
padding:0 0 3px 0;
border-bottom: 1px dotted #757575;
text-align:left;
}
 
.lmul li:hover{
padding:0 0 3px 0;
border-bottom: 1px dotted #b5b5b5;
text-align:left;
background:#d7d7d7;
cursor:pointer;
}
 
.main_menu{
color:black;
font: bold 15px Tahoma,Arial;
padding-bottom:10px;
}
 
.main_menu1{
color:black;
font: bold 15px Tahoma,Arial;
padding-bottom:10px;
 
}
 
.lmul1 li{
padding:0 0 3px 0;
border-bottom: 1px dotted #757575;
text-align:left;
}
 
.hrka{
margin-top:20px;
margin-bottom:20px;
background:black;
}
 
.maincont{
float:left;
padding-left:25px;
padding-top:15px;
width:75%;
}
 
.mcnt{
font:normal 16px Tahoma,Arial;
}
.mcnt h2{
color:black;
padding-bottom:7px;
}
 
 
.cntx{
width:100%;
margin:0;
padding:0;
}
.cntx h4{
color:#666363;
font:normal 18px Tahoma,Arial;
margin-top:15px;
 
}
 
.date{
color:black;
font:normal 10px Tahoma,Arial;
}
 
.textincntx{
width:100%;
font: normal 13px Tahoma,Arial;
color:black;
margin-top:15px;
}
 
.here{
text-decoration:;
color:black;
}
 
 
.textincntx1{
width:100%;
font: normal 13px Tahoma,Arial;
color:black;
}
/*
.rmenu{
float:right;
position:absolute;
left:86%;
width:160px;
border:1px solid black;
border-radius:5px;
top:50px;
}
 
.rmenu h2{
color:black;
font-size:20px;
text-align:center;
}*/
 
.clr{
clear:both;
margin:0;
padding:0;
}

@Heleg · 11.05.2012, 18:05 **[ТС]**

ну я в принципе понял. у тебя правый блок 75%, причем у родителя стоит такая минимальная ширина, что оставшиеся 25% всегда будут больше ширины левого блока, поэтому верстка не съезжает. интересно, но слишком грубый костыль. мне не подходит. ещё варианты?

@gulliver · 11.05.2012, 18:13

Heleg, к сожалению, мне самому интересно как это можно реализовать.
В свое время, я решил заморочиться, и сделать что то подобное... что бы при изменение ширины сайт , а точнее его центральный и боковые div как бы сужал центр, а сами боковые оставались не измененными. Конечно ожидаемый эффект на 100 % не получился, но что-то получилось....
Этот эффект очень хорошо показан на http://ruseller.com/. Но там что то страшное в коде... (margin-left: -100%, - 247px и тд...) я к сожалению не понял. Если найдешь ответ, на этот вопрос. Пожалуйста сообщи. т.к тоже интересно

@Heleg · 11.05.2012, 18:46 **[ТС]**

приду домой, опишу один вариант

@gulliver · 11.05.2012, 19:03

окей.

Vovan-VE · 11.05.2012, 19:42

HTML5
1
2
3
4
5
<div>
    <div id="left-col">left</div>
    <div id="center-col">center</div>
    <div class="clear"></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.clear {
    clear: both;
    float: none;
    height: 0;
    font-size: 0;
}
#left-col {
    float: right;
    width: 292px;
    padding: 3px;
    border: #000 solid 1px;
}
#center-col {
    margin-right: 310px;
    padding: 3px;
    border: #000 solid 1px;
}

http://jsfiddle.net/RDCNb/

@gulliver · 11.05.2012, 19:53

Хм, отнюдь ^^ но работает, только вот когда блок center полностью сужен,его содержимое отображается в левом блоке. но я это исправил общим дивом и прописал min-width.

Vovan-VE, я не совсем понимаю как тут помог margin-right: 310px;, не мог бы рассказать ?

Vovan-VE · 11.05.2012, 20:03

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

я не совсем понимаю как тут помог margin-right: 310px;, не мог бы рассказать ?

Центральный столбец - блоковый безо всяких float'ов в нормальном потоке. Отключите margin-right в отладчике и впишите в него много текста на несколько строк.
http://jsfiddle.net/a7y9p/
Обтекание вокруг левого блока (вокруг других float'ов) - это участь inline и inline-block'ов. Обычные блоки в нормальном потоке ничего никогда не обтекают. Остаётся только margin'ом отодвинуть правый край, до куда надо, и радоваться.

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .

@Heleg 209 / 209 / 6 Регистрация: 23.10.2011 Сообщений: 971

	Правая колонка фиксированная 11.05.2012, 13:12. Показов 7159. Ответов 22 Метки нет (Все метки) как ? Миниатюры 0

@gulliver Нарушитель 86 / 86 / 9 Регистрация: 09.05.2012 Сообщений: 456
	11.05.2012, 13:34
	width: n% width:300px 0

@Heleg 209 / 209 / 6 Регистрация: 23.10.2011 Сообщений: 971
	11.05.2012, 13:37 [ТС]
	gulliver, wtf n%??? 0

@gulliver Нарушитель 86 / 86 / 9 Регистрация: 09.05.2012 Сообщений: 456
	11.05.2012, 13:38
	я так понял ты хочешь левый блок динамический а правый статический ? 0

@Heleg 209 / 209 / 6 Регистрация: 23.10.2011 Сообщений: 971
	11.05.2012, 13:42 [ТС]
	gulliver, угодал 0

@gulliver Нарушитель 86 / 86 / 9 Регистрация: 09.05.2012 Сообщений: 456
	11.05.2012, 14:12
	Мне кажется это не совсем то, у тебя оба дива статические... а должен быть динамический 1 из них. 0

@gulliver Нарушитель 86 / 86 / 9 Регистрация: 09.05.2012 Сообщений: 456
	11.05.2012, 14:19
	на картинке у Heleg чу чуть по другому) левый динамический (во весь экран ),а вот правый фиксированный размер. В общем, надо спросить у Heleg'a то или нет? P.s пока сам думаю 0

@gulliver Нарушитель 86 / 86 / 9 Регистрация: 09.05.2012 Сообщений: 456
	11.05.2012, 14:25
	у меня при уменьшение экрана черный блок падает вниз ^^ (в последнем коде) 0

@Heleg 209 / 209 / 6 Регистрация: 23.10.2011 Сообщений: 971
	11.05.2012, 17:40 [ТС]
	i_masik, важно то, чтобы левый блок забирал под себя всё оставшееся пространство, как с width: auto. но плавающий элемент игнорируется левым блоком, поэтому возникает такая проблема Добавлено через 8 минут и да, таблицы не в счёт 0

@Heleg 209 / 209 / 6 Регистрация: 23.10.2011 Сообщений: 971
	11.05.2012, 18:05 [ТС]
	ну я в принципе понял. у тебя правый блок 75%, причем у родителя стоит такая минимальная ширина, что оставшиеся 25% всегда будут больше ширины левого блока, поэтому верстка не съезжает. интересно, но слишком грубый костыль. мне не подходит. ещё варианты? 0

@gulliver Нарушитель 86 / 86 / 9 Регистрация: 09.05.2012 Сообщений: 456
	11.05.2012, 18:13
	Heleg, к сожалению, мне самому интересно как это можно реализовать. В свое время, я решил заморочиться, и сделать что то подобное... что бы при изменение ширины сайт , а точнее его центральный и боковые div как бы сужал центр, а сами боковые оставались не измененными. Конечно ожидаемый эффект на 100 % не получился, но что-то получилось.... Этот эффект очень хорошо показан на http://ruseller.com/. Но там что то страшное в коде... (margin-left: -100%, - 247px и тд...) я к сожалению не понял. Если найдешь ответ, на этот вопрос. Пожалуйста сообщи. т.к тоже интересно 0

@Heleg 209 / 209 / 6 Регистрация: 23.10.2011 Сообщений: 971
	11.05.2012, 18:46 [ТС]
	приду домой, опишу один вариант 0

@gulliver Нарушитель 86 / 86 / 9 Регистрация: 09.05.2012 Сообщений: 456
	11.05.2012, 19:03
	окей. 0

@gulliver Нарушитель 86 / 86 / 9 Регистрация: 09.05.2012 Сообщений: 456
	11.05.2012, 19:53
	Хм, отнюдь ^^ но работает, только вот когда блок center полностью сужен,его содержимое отображается в левом блоке. но я это исправил общим дивом и прописал min-width. Vovan-VE, я не совсем понимаю как тут помог margin-right: 310px;, не мог бы рассказать ? 0