Note that there are some explanatory texts on larger screens.

plurals
  1. PO"sidebar" seems to be attached to "main," but i'm unsure how/how to undo
    primarykey
    data
    text
    <p>I'm designing a blog/portfolio with three sections- header/nav is on the far left, the main content is in the vertical center, and the sidebar is on the far right. My intention is to have the header/nav in a fixed position on the left, and the sidebar in a fixed position on the right, with the main content scrolling through the vertical center.</p> <p>I noticed that when I began work on the portfolio page(again, aligned with the vertical center), thus removing the main content, the sidebar moved from it's supposedly fixed position to the far left near the header/nav. </p> <p>I'm having a hard time finding exactly what's causing this and I don't quite know how to ensure that the sidebar with stay to the far right regardless of what is (or isn't) in the center.</p> <pre><code>&lt;body&gt; &lt;header&gt; &lt;logo&gt; &lt;a href="#"&gt;&lt;img src="img/logo.png" alt="whskytngfxtrt logo" height="139" width="158" /&gt;&lt;/a&gt; &lt;/logo&gt;&lt;!-- end logo --&gt; &lt;nav&gt; &lt;ul&gt; &lt;li id="blog"&gt;&lt;a href="#"&gt;BLOG&lt;/a&gt;&lt;/li&gt; &lt;li id="work"&gt;&lt;a href="#"&gt;WORK&lt;/a&gt;&lt;/li&gt; &lt;li id="about"&gt;&lt;a href="#"&gt;ABOUT&lt;/a&gt;&lt;/li&gt; &lt;li id="contact"&gt;&lt;a href="#"&gt;CONTACT&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt;&lt;!-- end nav --&gt; &lt;/header&gt;&lt;!-- end header --&gt; &lt;work&gt; &lt;category&gt; &lt;ul&gt; &lt;h1&gt;Web&lt;/h1&gt; &lt;h1&gt;Print&lt;/h1&gt; &lt;h1&gt;Identity&lt;/h1&gt; &lt;/ul&gt; &lt;sidebar&gt; &lt;dictionary&gt; &lt;h3&gt;&lt;b&gt;hwis-kee tang-goh foks-trot&lt;/b&gt;&lt;/h3&gt; &lt;h4&gt;&lt;p&gt;&lt;i&gt;noun&lt;/i&gt; 1. the best damn creative studio there ever was&lt;/p&gt;&lt;/h4&gt; &lt;/dictionary&gt;&lt;!-- end dictionary --&gt; &lt;twitter&gt; &lt;h3&gt;@whskytngfxtrt&lt;/h3&gt; &lt;h4&gt;&lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;sometimes i just really love the internet&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;sometimes i just really love the internet&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;sometimes i just really love the internet&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt;&lt;/h4&gt; &lt;/twitter&gt;&lt;!-- end twitter --&gt; 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; } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload