Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS Centre Column - Clearing Error?
    primarykey
    data
    text
    <p>I'm very new to CSS and have been sitting here for hours trying to figure out why my middle section is not displaying as a column. I've searched the net with apparently no success. I have tried repositioning the divs, clearing everything and floating the bejesus out of everything. It must be something simple, but I don't know what. Could anyone help?</p> <p>I apologize for the large amount of code if that isn't appropriate, but I don't yet have anything uploaded.</p> <p>Thanks in advance</p> <p>HTML </p> <pre><code>&lt;head&gt;&lt;style type="text/css" media="all"&gt;@import "css/master.css";&lt;/style&gt;&lt;/head&gt; &lt;body&gt; &lt;div id="page-container"&gt; &lt;!-- RIGHT HAND PAGE --&gt; &lt;div id="navbar"&gt;NavBar&lt;/div&gt; &lt;div id="mediaplayer"&gt;Meda Player&lt;/div&gt; &lt;div id="sightings"&gt;Sightings&lt;/div&gt; &lt;div id="blogheader"&gt;Blog Header&lt;/div&gt; &lt;div id="sociallinks"&gt;Social Links&lt;/div&gt; &lt;!-- LEFT HAND PAGE --&gt; &lt;div id="logo"&gt;Logo&lt;/div&gt; &lt;div id="mainpic"&gt;MainPic&lt;/div&gt; &lt;!-- CENTRE PAGE --&gt; &lt;div id="headline"&gt;Headline&lt;/div&gt; &lt;div id="newsitems"&gt;News Items&lt;/div&gt; &lt;!-- FOOTER --&gt; &lt;div id="footer"&gt;Footer&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>CSS</p> <pre><code>#page-container { width:960px; margin:auto; background:red; } html, body { margin:0; padding:0; } #logo { background:purple; height:150px; width:270px; margin-right:450px; } #mainpic { background:darkgrey; width:270px; height:450px; } #navbar { float:right; background:lightblue; height:50px; width:690px; } #headline { background:grey; height:200px; margin-left:270px; margin-right:350px; } /* News Items Mock - height:350px */ #newsitems { background:blue; margin-left:270px; margin-right:350px; } #mediaplayer { clear:both; float:right; background:black; height:200px; width:350px; } /* Sightings Mock - height:150px; */ #sightings { clear:both; float:right; background:green; width:350px; } #blogheader { clear:both; float:right; background:darkgreen; height:40px; width:350px; } #sociallinks { clear:both; float:right; background:orange; height:40px; width:350px; } #footer { background:yellow; clear:both; height:30px; } </code></pre>
    singulars
    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.
 

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