Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy is my sidebar being pushed below content?
    primarykey
    data
    text
    <p>I am trying to setup a template with HTML and CSS and I am having trouble with my sidebar. It seems to be getting pushed below my content although it is to the left like it should be. I can't figure out why? Does anyone have any suggestions?</p> <p><strong>Example:</strong> <a href="http://jsfiddle.net/zDdfn/" rel="nofollow">http://jsfiddle.net/zDdfn/</a></p> <p>HTML:</p> <pre><code>&lt;head&gt; &lt;title&gt;working&lt;/title&gt; &lt;link href="style.css" rel="stylesheet" type="text/css" /&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="container"&gt; &lt;div id="banner"&gt; &lt;/div&gt; &lt;!-- End banner div --&gt; &lt;div id="navcontainer"&gt; &lt;ul id="navlist"&gt; &lt;li&gt;&lt;a href="index.php"&gt;HOMEPAGE&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="about.php"&gt;ABOUT&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a id="current" href="index.php"&gt;HOMEPAGE&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="index.php"&gt;HOMEPAGE&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!-- End navcontainer div --&gt; &lt;div id="content"&gt;main content &lt;/div&gt; &lt;!-- End content div --&gt; &lt;div id="sidebar"&gt; sidebar content &lt;/div&gt; &lt;!-- End sidebar div --&gt; &lt;div id="footer"&gt; foooter &lt;/div&gt; &lt;!-- End footer div --&gt; &lt;/div&gt; &lt;!-- End container div --&gt; &lt;/body&gt; </code></pre> <p>and CSS</p> <pre><code>html, body { height: 100%; /* Required */ } body { margin : 0; padding : 0; font : 75% "Trebuchet MS", verdana, arial, tahoma, sans-serif; line-height : 1.8em; color : #000000; background : #F5F5FF; } #container { position: relative; min-height: 100%; width : 800px; margin : 0 auto 0 auto; border-style: solid; border-width:1px; background : #FFFFCC; } #banner { color : #000000; border-style: solid; border-width:1px; height : 150px; background : #fff } #content { min-height: 100%; float:right padding : 10px; margin-left : 200px; margin-bottom : 10px; color : #666; background : #F5EBCC; border-left-style:dotted; border-left-color:#8F8F00; border-bottom-style:dotted; border-bottom-color:#8F8F00; } #sidebar { float : left; width : 20px; padding : 10px; color : #000000; border-style: solid; border-width:1px; } #footer { clear:both; position:relative; bottom: 0; width: 800px; background : #FFFFCC; } #navcontainer { background:#E0E066; } #navlist { list-style: none; /* list-style: none removes bullets */ margin: 0px; padding : 0.5em 0; } #navlist li { display: inline; margin : 0; } #navlist li a { padding : 0.5em 0.5em; margin: 0; color : #000; background : #B8B800; text-decoration : none; } #navlist li a:hover { color : yellow; background : #8F8F00 url(img/menu_arrow.gif) bottom center no-repeat; } #navlist li a#current { color : #fff; background : #8F8F00 url(img/menu_arrow.gif) bottom center no-repeat; } </code></pre>
    singulars
    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