Я разрабатываю блог/портфолио с тремя разделами: заголовок/навигация в крайнем левом углу, основной контент в центре по вертикали, а боковая панель в крайнем правом углу. Мое намерение состоит в том, чтобы заголовок/навигация находились в фиксированном положении слева, а боковая панель — в фиксированном положении справа, а основной контент прокручивался по центру по вертикали.
Я заметил, что когда я начал работать над страницей портфолио (опять же, выровняв ее по центру по вертикали), таким образом удалив основной контент, боковая панель переместилась из своего предположительно фиксированного положения в крайнее левое рядом с заголовком/навигацией.
Мне трудно найти, что именно вызывает это, и я не совсем знаю, как обеспечить, чтобы боковая панель оставалась в крайнем правом углу независимо от того, что находится (или нет) в центре.
<body>
<header>
<logo>
<a href="#"><img src="img/logo.png" alt="whskytngfxtrt logo" height="139" width="158" /></a>
</logo><!-- end logo -->
<nav>
<ul>
<li id="blog"><a href="#">BLOG</a></li>
<li id="work"><a href="#">WORK</a></li>
<li id="about"><a href="#">ABOUT</a></li>
<li id="contact"><a href="#">CONTACT</a></li>
</ul>
</nav><!-- end nav -->
</header><!-- end header -->
<work>
<category>
<ul>
<h1>Web</h1>
<h1>Print</h1>
<h1>Identity</h1>
</ul>
<sidebar>
<dictionary>
<h3><b>hwis-kee tang-goh foks-trot</b></h3>
<h4><p><i>noun</i> 1. the best damn creative studio there ever was</p></h4>
</dictionary><!-- end dictionary -->
<twitter>
<h3>@whskytngfxtrt</h3>
<h4><ul>
<li><a href="#">sometimes i just really love the internet</a></li>
<li><a href="#">sometimes i just really love the internet</a></li>
<li><a href="#">sometimes i just really love the internet</a></li>
</ul></h4>
</twitter><!-- end twitter -->
header {
background: none;
float: left;
margin-top: 123px;
margin-left: 22px;
position: fixed;
width: 158px;
}
main {
float: left;
margin-left: 300px;
margin-top: 310px;
}
work {
float: left;
margin-left: 300px;
margin-top: 310px;
}
sidebar {
border-top: 1px solid #202020;
padding-top: 25px;
float: right;
margin-left: 153px;
margin-top: 295px;
position: fixed;
width: 158px;
}
sidebar dictionary {
position: fixed;
}
sidebar twitter {
list-style-type: none;
position: fixed;
}
