BAV

В голову пришла мысль сделать иконку relative. И, о чудо, кажется получилось. FF и IE8 съели без проблем. IE7 смещает строки при максимальном сжатии по ширине, но мне кажется, что это косяк IE7 portable + windows7. Если кто-то на нормальной установке IE7 сможет проверить, будет замечательно. Я попозже сам тоже посмотрю. Код в студию: <div style="border:1px solid;max-width:60%;min-width:200px;background: yellow;margin-bottom:20px;padding-left:50px;"> <a style="display:inline-block;*display:inline;*zoom:1;background: green;width:45px;height:45px;vertical-align:middle;position: relative;left:-50px;margin-right:-50px;"> </a> <a style="display:inline-block;*display:inline;*zoom:1;background: red;vertical-align:middle;">Академия занимательных наук. География</a> </div> <div style="border:1px solid;max-width:60%;min-width:200px;background: yellow;margin-bottom:20px;padding-left:50px;"> <a style="display:inline-block;*display:inline;*zoom:1;background: green;width:45px;height:45px;vertical-align:middle;position: relative;left:-50px;margin-right:-50px;"> </a> <a style="display:inline-block;*display:inline;*zoom:1;background: red;vertical-align:middle;min-width:130px;">самба</a> </div>

Сам контейнер, который в нашем примере выглядит так: <div style="border:1px solid;width:200px;background:yellow;"> в моем случае еще и имеет ширину, заданную в %.

Стал натягивать пример на рабочий макет и понял почему у меня не получалось с inline-block. Правый div, который с текстом, его нужно плавающим сделать. А тут получается фиксированным. Очень жаль, красиво. Все равно спасибо за помощь!

А вот так не годится? Вот это да, вот это красиво!!! Спасибо огромное, все очень просто. Я ведь даже попробовал с inline-block поиграть, но хаки для IE не пробовал. Еще раз большое спасибо!!!

Мне конечно очень интересно, реально ли найти адекватное блочное решение. Но я все-таки делаю на табличках. Это гораздо более читабельное и даже более оптимизированное решение, в данном случае.

Сразу напишу смотрю в: ff4.0.1, ie8 (в 6 и 7 пока даже не открывал) и opera 11.11 под windows7 Попытка через абсолютное позиционирование: <div style="border:1px solid;width:60px;position:relative;padding-right:130px;background:yellow;"> <div style="display:block;background:green;width:45px;height:45px;"> </div> <div style="position:absolute;width:130px;right:0;top:50%;background:red;"> <div style="position:relative;top:-50%;background:#000;"><a href="" >самба<br> де <br>жанейро</a></div> </div> </div> Ожидаемый результат получился только в IE, если я верно реализовал идею. FF и Opera - не скушали. Вариант с table-row и table-cell <div style="display:table-row"> <div style="border:1px solid;width:47px;display:table-cell;vertical-align:middle;"> <div style="display:block;background:green;width:45px;height:45px;"> </div> </div> <div style="border:1px solid;display:table-cell;vertical-align:middle;"> <a href="" style="vertical-align:middle;">самба<br> де <br>жанейро</a> </div> </div> Cработало как надо в FF и opera, и.е. отказался располагать на одной строке блок с картинкой и блок с текстом. Попробовал float для блока с картинкой, ушло выравнивание по вертикале.

Ну попробуем... Спасибо. Напишу потом что получилось

Абсолютным долже быть див с текстом или с картинкой? Я что-то идею не понял пока...

Решил попробовать table-cell. Следующий вариант работает, но только если указывать фиксированную высоту блока. <div style=""> <div style="border:1px solid;float:left;width:47px;display:table-cell;vertical-align:middle;"> <div style="display:block;background:green;width:45px;height:45px;"> </div> </div> <div style="border:1px solid;display:table-cell;height:47px;vertical-align:middle;"> <a href="" style="vertical-align:middle;">sdfdsfsdf <br>fgjsd klj lk </a> </div> </div> Если так, то наверное проще табличку сделать, чем создавать сложные конструкции из js+css+html. Думаю и работать быстрее будет.

Добрый день. Задача следующая выводится список, элементами которого является ссылка (блок с фоновым изображением 45px x 45px) и справа от него идет название. Это название может быть в одну или две строчки. Необходимо чтобы при любом кол-ве строк, текст выравнивался по середине. Пример изображения здесь http://files.mail.ru/OP74ZZ?t=1 С помощью таблички такое делается в легкую, а как с div'ами?

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

Тогда уже #content {background: #e3e8cc;border: solid 1px black;_margin-left: 275px;overflow: hidden;} НО это не ребаотает все равно в IE6

Так в том то и дело, что у меня в этом диве еще куча всякого конетна, в том числе иногда картинки с float: left; Причем указывать высоту или min-height тоже немогу, т.к. размеры картинок и кол-во текста различные. А в таком случае получается что следующий див, прилипает к картинке слева (т.к. картика вылезает за границы див). Поэтому хочу принудительно заставить див переносится на новую строку.

Имеется две колонки (в левом меню, в правом контент). Есть необходимость в правый блок выводить каждый из которых должен начинатся с новой строки. Но возникает проблема, если указываю clear:both, то див переносится до уровня конца левого блока. Какой может быть выход? <style type="text/css"> #menu {width: 270px;background: #e3e8cc;border: solid 1px black;float: left;} #content {background: #e3e8cc;border: solid 1px black;margin-left: 275px;} </style> <body> <div id="menu"> hkjh hkjh hkjh hkjh hkjh hkjh hkjh hkjh hkjh hkjh hkjh hkjh hkjh hkjh </div> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p> <div style="clear: both;background: red;">1111</div> <div style="clear: both;background: green;">2222222</div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p> </div> </body>

Получилось вот так работает onmouseover="this.style.textDecoration='underline';"

<a onmouseover="java script:this.style.textDecorationUnderline" class="read_more">Посчитать еще раз</a> Или я не прав?

Таблички не хочу использовать, так как вся остальная верстка на дивах - чтобы стиль не рушился. Это последний элемент остался. А про процены - вариант отличный. Спасибо makarena. Единсвенная проблема что их может быть не обязательно 4, но думаю, этот вопрос кодом решу.

Есть проблема. Имеется див, ширина которго "резиново" меняется от 1000px до 1160px; В него вложены 4 дива, с float: left и фиксированной высотой. Сейчас я указываю для 4-ех вложенных дивов еще и width. И получается что див-родитель масштабируется, в зависимости от размера браузера, а 4 вложенных приклеиваются к левому краю, а справа пустота. Задача такая. Без указания ширины для вложенных, выравнивать их по всей ширине дива родителя. Ибо не усложнать css expression, напишу код только под FF, сути не меняет. fsdfdsfsdf fsdfdsfsdf fsdfdsfsdf fsdfdsfsdf Какие предложения будут? Таблицы не вариант? Спасибо.