absolute в relative проблема блока с высотой

[TommyDBrown]

Приветствую, возникла проблема, пока не знаю как решить, на сайте имеется меню, которое шириной больше чем колонка в которой оно находится, в связи с этим было применено свойство position:absolute, но когда мы выводим еще один блок под этим меню, то он встает наверх незамечая нашего меню, хотя там стоит position:relative; почему то высота контейнера moduletablecompany никак не определяется, а виден только отступ сверху в 40 пикселей. Прошу помочь

Html код блока:

<div class="moduletablecompany"><! -- стиль div-а  margin-top: 40px;position: relative;--><div class="moduleinnercompany"><! -- стиль div-а  left: -3px;position: absolute;top: 0;--><ul class="menucompany"><li class="item-148"><a href="/o-nas/otzivi"><span>Отзывы</span></a></li><li class="item-149"><a href="/"><span>События</span></a></li><li class="item-150"><a href="/"><span>Публикации</span></a></li></ul></div></div>

[Светлана Г.]

Потому что блок с position:absolute; вырван из потока и о его существовании, а также о его размерах никакие другие блоки не могут ничего знать.

[TommyDBrown]

ну это я понял, а как решить данную проблему?

[Светлана Г.]

Блоку, стоящему за с position:absolute;, задать поля с учетом размеров этого блока.

[ows.nightwolf]

ну это я понял, а как решить данную проблему?

Не применять position: absolute. Скорее всего вашу проблему можно решить каким-то другим способом, т.к. я не совсем понял как связаны между собой излишняя ширина меню и результат действия свойства position: absolute.

[TommyDBrown]

Прикладываю скрин, как это выглядит думаю станет яснее. Светлана задавать размеры блока не совсем удобно т.к. сайт планируется потом передавать клиенту, а он может добавить еще подпункты и придется тогда вновь менять размеры, сам он этого сделать конечно не сможет.  Не применять position: absolute вряд ли возможно в данной ситуации, по крайней мере других вариантов я не нашел. Что странно что когда мы проделываем такую же процедуру с тегом h3, то есть присваиваем ему свойство position:absolute; а для блока в котором он находится position:relative; то все выглядит впорядке и высота блока как то сама указывается. В общем проблема остается актуальна

[klierik]

Прикладываю скрин, как это выглядит думаю станет яснее.

нет, не яснее -- читай ссылку в подписи 

[TommyDBrown]

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

[Светлана Г.]

Первое, что пришло в голову: использовать position:absolute; только для формирования выступающей части пункта меню с помощью псевдоэлемента :before;

вообще, хорошо бы увидеть левую часть макета - то, что слева от меню.

Edited January 4, 2014 by Светлана Г.

[ows.nightwolf]

Можно использовать стандартное позиционирование (или position: relative), а для того чтобы модуль меню "вылезал" чуть-чуть влево задать ему отрицательный margin-left, а у родительского блока установить overflow: visible; тогда и показываться будет все как надо, и высота модуля меню будет учитываться.

Edited January 4, 2014 by ows.nightwolf

[Chakra]

или так: http://jsfiddle.net/KEpB2/

[TommyDBrown]

Вариант с отрицательным margin пробовал, но не получалось, т.к. не задавал overflow: visible; сейчас попробовал все заработало)  Chakra твой вариант тоже работающий, но он плох тем что высоту блока мы задаем самостоятельно, проблема решена, спасибо всем участникам)

[Chakra]

Высоту блока я задала для наглядности. У меня другой минус: я задаю ширину li, поэтому вариант nightwolf'a http://jsfiddle.net/LLbCy/ все-таки лучше (кстати, этот же вариант используется на htmlbook.ru).