Вопрос к профессионалам

[exessqd1]

Собственно вопрос опять же про overflow-x: hidden; overflow-y:visible;

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

Нужна четкая вложеность:

<div class="first">
	<div class="second">

	</div>
</div>

Вот наглядная схема то что нужно сделать

<style>

.first {
	margin: 100px auto;
	border: 5px solid #000;
	width: 500px;
	height: 200px;

	overflow-x:hidden;
	overflow-y:visible;
	}

.second {
	width: 600px;
	height: 300px;
	background: lightblue;
	}

</style>


<div class="first">
	<div class="second">

	</div>
</div>

Вот как выглядит:

Вот как нужно сделать чтобы выглядело:

[Great Rash]

Есть мнение, что у вас не получится желаемого... С предложенной HTML-структурой по крайней мере.

[psywalker]

Есть мнение, что у вас не получится желаемого... С предложенной HTML-структурой по крайней мере.

Вот и я ему написал тоже самое тут http://forum.htmlbook.ru/index.php?s=&...st&p=183596

[exessqd1]

Вот пример с реального проекта, есть блок слайдера(синий) из которого должно выпадать окошко больше чем сам блок как на скриншоте.

Окошко находится в диве с картинкой.

Так как сейчас сделано:

Просто синий блок увеличен до 500px чтобы выдающие окошко не скрывалось.

Меня этот вариант не устраивает, потому что синий блок перекрывает баннеры по ним нельзя кликнуть, перекрывает текст + если выпадающие окошко будет больше 500px оно скроется.

Должно быть более элегантное решение. Хорошим решением было бы overflow-x:hidden; overflow-y: visible; на синий блок и высота синего блока равна красному но это как видно не работает.

Можно конечно поморочится с z-index'ом:

1. Eсли сделать z-index: -1; на слайдере по банерам можно будет кликнуть а по слайдеру нет даже если на элементах внутри слайдера прописать z-index: 9999;

2. Можно проставить баннерам position: absolute; и z-index: 9999; (что собственно и сделано) но я думаю это не очень хорошее решение

Идеи есть?