Фиксированное меню

Question

[E]

<div id="wrapper"><!-- 650px -->
	<header><!-- position: fixed; width:100%; -->
		<div id="logo"><!-- float:left -->
			<img src="..." alt="">
		</div>
			
		<nav><!-- float:right -->
			<ul>
				<li><a href="">линк</a></li>
				<li><a href="">линк</a></li>
				<li><a href="">линк</a></li>
			</ul>
		</nav>
	</header>
</div>

Никак не могу решить проблему. Вроде бы div#wrapper имеет ширину 650px, но как только header'у делаю ширину 100%, хедер растягивает на всю ширину монитора (в моем случае 1230) ну и соответственно линки благополучно уезжают за пределы экрана, причем без полосы прокрутки.

Answer 1

[Вячеслав Слинько]

Да, проблема в position.
Значение fixed, как и absolute, выдирает элемент из потока и позиционирует его относительно всего окна.
Соответственно 100% — ширина всего окна.

Решением может быть применить position к #wrapper а не к header.

Comments

[E]

Слушайте, а ведь получилось, хотя я пробовал как вы посоветовали, до вопроса на хабре, просто видимо примелькалось, в любом случае спасибо за помощь)

Answer 2

[ferasinka]

Если я правильно вас понял, то необходимо убрать position: fixed;

Comments

[E]

Да, поняли вы меня верно, только тут проблема в том что, без position: fixed; никак не обойтись если фиксировать меню сверху.