Как привязать статический блок к правому краю?

[vla]

Как прижать статический блок к правому краю?
В первый раз сталкиваюсь со статическими блоками. Решение, вроде, очевидно, но не работает...

Как я предполагал

#sidebar{width:15em;margin:112px 0 0 0;position:fixed;float:right;}

Все как надо, только блок прижат к левому краю

Может для position:fixed не работает float?

 

[tigra60]

Что вы имеете в виду под статическим блоком?

И решение ваше вовсе не очевидно. Зачем там position:fixed и float:right ?
Блок по умолчанию и так прижат к левому краю. Если вы хотите прижать его к правому краю, так это делается так:

margin: 0 0 0 auto;

То есть левое поле - auto, а остальные поля - 0. (ну, или сколько вам там нужно в цифрах - px или em)

Естественно, если это не две колонки. Но я в коде вижу только один блок.

 

[Den_Mak]

а просто не хочешь оставить float:right

 

[vla]

Зачем там position:fixed и float:right ?

а просто не хочешь оставить float:right

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

margin: 0 0 0 auto;

про этот прием не знал, хоть это и не помогло, буду иметь ввиду и использовать. Спасибо!

 

[tigra60]

Ну, так для position:fixed нужно поступать та же, как и для position:absolute, указать top или bottom и left или right :

#sidebar {
	width:15em;
	margin:0;
	position:fixed;
	right:0px;
	top:112px;
}

Да, и еще учтите, что если этот блок #sidebar находится внутри другого блока, например, #wrapper и должен позиционироваться по правому краю именно этого #wrapper, а не по правому краю экрана, то у #wrapper должен быть стиль position:relative.

 

[vla]

[member=tigra60], спасибо! right:123; помогло!

Да, и еще учтите, что если этот блок #sidebar находится внутри другого блока

Нет, он нигде не находится... Сайт построен по статье с вашего сайта Резиновая верстка в две колонки. Закрепить хочу правый блок.

В идеале хочу исполнить:
если поддерживается fixed - меню будет закреплено,
если нет, то элементы будут располагаться как в шаблоне

осталось продумать если не поддерживаются отрицательные отступы (margin:-123 - что будет?
но этот вопрос, пока оставлю...

 

[tigra60]

Ну, так у вас вряд-ли что то получится. Это совсем другой алгоритм. Попробуйте тогда блоку с контентом установить правое поле 15em (по ширине сайдбара. И никаких там для него float.

 

[vla]

Ну, так у вас вряд-ли что то получится.

Все работает! примерно так и сделал...

И никаких там для него float.

а это надо оставить на случай старых браузеров (где не поддерживается position:fixed;)
я привязал шапку, подвал и правый контейнер - position:fixed; оставил только главный(левый) контейнер...

В дальнейшем идея такая:
С помощью JS проверить размеры окна. И, если "маленькое" разрешение - то position:fixed; убрать, если "большое" оставить.

[member=tigra60], если, вдруг, вам станет интересно посмотреть на свой шаблон
html
css

 

[tigra60]

Вот как то так:
Посмотреть вложение fixed.html

Да, было интересно. Посмотрел. Сосем даже не дурно! Молодца! Так держать.
CSS код прозрачней пишите, а то сами запутаетесь.

И еще - переходите на html5 и используйте reset.css и typography.css Как видите, у меня в примере практически страница сделана, и ни одного класса или ID нету.

 

[vla]

[member=tigra60], не могу понять, почему нельзя добавить float:left; для основного блока (левого) и float:right; для меню (правого блока)
Запасной вариант как бы!
Иначе, если не поддерживается position:fixed; меню улетит вниз, под гравный блок...
http://nng10.ru/fixed2.html


ps: не прочитат предыдущее сообщение

 

[tigra60]

Для самизнаетекакого браузера сделайте position:absolute.

 

[vla]

[member=tigra60], в коде было написано:

* {margin:0; padding:0}

Обясните в двух словах, что значит звезда... А то не знаю как через поиск это найти...

И еще - переходите на html5 и используйте reset.css и typography.css

изучу, как будет возможность... Пока обычный HTML и CSS не до конца изучил, следующий JS надо осилить, а там видно будет...

 

[tigra60]

селектор * означает, что стили применяются для всех элементов. Это самый простой способ сброса стилей по умолчанию. Рекомендуется использовать отдельную CSS от Эрика Мейера - http://meyerweb.com/...ools/css/reset/

Тем более, что вы еще только учите HTML и CSS - самое время для HTML5. Смотрели мой пример? Понравилось? Неужели сложно?

Кстати, тут мой земляк книгу рекомендовал - Б.Лоусон, Р.Шарп "Изучаем HTML5". Первые три главы в самый раз вам подойдут.

 

[vla]

Смотрели мой пример? Понравилось?

Очень понравилось! Все просто!
Но у меня в голове и так каша... Рассмотрю этот вариант, почитаю плюсы минусы итд... Ваш совет запомнил!
Книгу тоже полистаю. (Сейчас читаю Э.Рудер 'Типографика', очень интересно - ценный материал!)