Casufi

Мне нужно, чтобы размер дива зависел от размера содержимого.

В спецификации CSS про свойство width написана интересная штука (http://www.htmlbook.ru/css/width.html) Если я вставляю в сайт с резиновой версткой одну картинку большой ширины, то появляется горизонтальный скроллер, но угловые элементы, по прежнему стоят у края окна броузера. Подскажите, можно ли сделать так, чтобы граница блока определялась границей контента ? Пример сайта вот здесь http://ulskiy.org.ua/example/

На сайте http://ulskiy.org.ua/example/example.html блок с текстом должен лежать поверх двух картинок внизу страницы в коде прописываю .contentbody { width:60%; margin-left: 18%; margin-right: 18%; z-index:2; } .unit_contentbody{ margin-bottom: 35px; font-family: Geneva, Arial, Helvetica, sans-serif; font-size:small; z-index:2; } .img_contentbody { float:left; border:none; margin-right:10px; z-index:2; } .bttomheader { width: 100%; position:relative; min-width:1000px; z-index:1; } .bttomheaderleft { width: 259px; height: 290px; background: url(images/ver.2.3.1_19.gif) bottom left no-repeat; position:absolute; left:0px; bottom: 0px; z-index:1; } .bttomheadercenter { height: 33px; min-width: 372px; background-color:#889399; position:absolute; left: 258px; right: 365px; bottom: 0px; z-index:1; } .bttomheaderight { width: 369px; height: 290px; background: url(images/ver.2.3.1_21.gif) bottom right no-repeat; position:absolute; right: 0px; bottom: 0px; z-index:1; } Но почемуто свойство не работает. И еще интересный глюк. Иногда, если сайт открыть в Експлорере 6, то блок меню пропадает, если сдвинуть границу броузера влево, то меню появляется, если нажат Контрол Ф5 то меню тоже появляется. Я так понимаю это глюк .menucontainer { width: expression(document.documentElement.clientWidth <1000? "1000px": "auto"); } как от него избавиться ?

Нашел, как заставить приведенный код работать Выглядеть должно вот так. То есть у родительского блока тоже должно стоять position:absolute <div style="position:absolute;width:100%; height:60px;"><div style=" width:200px; right:40px; bottom:0px; position:absolute;" >Абра Кодабра</div></div> Глава 10.1 Определение "контейнера" Спецификация CSS http://experiment.net.ru/css2/?f=visudet.h...g-block-details

Подскажите пожалуйста, работает ли позиционирования одного блока div относительно другого блока div? Будет ли работать вот такое позиционирование ? <div style="width:100%; height:60px;"><div style=" width:200px; right:40px; bottom:0px; position:relative;" >Абра Кодабра</div></div> Как можно спозиционировать правый край внутреннего дива от правого края внешнего ? Вот моя попытка реализации резинового футера http://ulskiy.org.ua/example/example.html

Проблема оказывается в том, что во всех броузерах в диве позиционировать можно все четыре угла, а два ослика, ИЕ 6 и ИЕ 5, стоят особняком, они понимают абсолютное позиционирование только одного угла. Как это обойти я подсмотрел здесь http://designformasters.info/posts/absolute-position-layout/ Вот окончательный код <!-- body { margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; height: 100%; min-height: 100%; } .topheader { background: #768791 url(images/ver.2.3.1_01.jpg) left top no-repeat; width: 100%; height:192px; } .bttomheaderleft { width: 259px; height: 290px; background: url(images/ver.2.3.1_19.jpg) bottom left no-repeat; position:absolute; left:0px; bottom: 0px; } .bttomheadercenter { height: 33px; background-color:#889399; background-repeat:repeat-x; position: absolute; left: 258px; right: 365px; bottom: 0px; } .bttomheaderight { width: 369px; height: 290px; background: url(images/ver.2.3.1_21.gif) bottom right no-repeat; position: absolute; right: 0px; bottom: 0px; } --> </style> <!--[if lt IE 7]> <style type="text/css"> .bttomheadercenter { width:expression(document.body.clientWidth-365); } </style> <![endif]-->

Почти сработало, спасибо за решение. Похоже я не в том разделе тему создал, уважаемый модератор, если возможно перенесите ее в "проблемы с версткой"

Есть три стиля для слоев .bttomheaderleft { width: 259px; height: 290px; background: url(images/ver.2.3.1_19.jpg) bottom left no-repeat; position:absolute; left:0px; bottom: 0px; } .bttomheadercenter { height: 33px; background-color:#889399; background-repeat:repeat-x; position: absolute; left: 258px; right: 365px; bottom: 0px; } .bttomheaderight { width: 369px; height: 290px; background: url(images/ver.2.3.1_21.gif) bottom right no-repeat; position: absolute; right: 0px; bottom: 0px; } И три слоя <div class="bttomheaderleft"></div> <span class="bttomheadercenter">текст между картинками</span> <div class="bttomheaderight"></div> При этом в IE6 слой bttomheadercenter закрашивается цветом только на ширину текста, хотя по идее div это блочный элемент, и все свойства , которые к нему применяются должны действовать на всю ширину Вот страница с проблемным дивом http://ulskiy.org.ua/example/example.html

А можно точнее ? Атрибут position: absolute; указывает на то, что от нижнего края броузера все три блока должны отступать на 0 пикселей. если у центрального блока поменять это значение на relative, то он просто уедет вверх, под заголовок.

Нужно расположить три блока внизу страницы. Один слева, второй справа и третий должен растягиваться между ними. Вот код http://ulskiy.org.ua/example/example.html Почемуто центральный блок <div class="bottomheadercenter">текст между картинками</div> наползает на левый. Помогите пожалуйста разобраться почему.