Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Here are a few issues:</p> <p>First, you have a div with an article inside, which, from what I can tell isn't necessary, since the article can take the place of the div. Then you have a <code>p</code> to hold the <code>header</code>, article body, and <code>footer, when</code>p<code>s should never have header elements (</code>h1<code>, h3</code>, etc) even in the older spec and it breaks the idea of using an <code>article</code> tag.</p> <p>Second, as mentioned, you have three divs all with the same id.</p> <p>Third, you are using relative positioning for the main divs, which I don't think helps with the floating (maybe I'm wrong), and relative positioning really only helps for child elements that are absolute positioned.</p> <p>Having said that last point, I could be wrong, because the following works for me:</p> <h3>HTML:</h3> <pre><code>&lt;section id="articles"&gt; &lt;article class="newspost_bg"&gt; &lt;header&gt;&lt;h3&gt;The fast red fox!&lt;/h3&gt;&lt;/header&gt; &lt;p&gt;This is where the article resides in the article tag. This is good for SEO optimization.&lt;/p&gt; &lt;footer&gt;Read More..&lt;/footer&gt; &lt;/article&gt; &lt;article class="newspost_bg"&gt; hello &lt;/article&gt; &lt;article class="newspost_bg"&gt; hello &lt;/article&gt; &lt;/section&gt; &lt;aside id="advertisement"&gt; &lt;script type="text/javascript"&gt;&lt;!-- google_ad_client = "ca-pub-2139701283631933"; /* testing site */ google_ad_slot = "4831288817"; google_ad_width = 120; google_ad_height = 600; //--&gt; &lt;/script&gt; &lt;/aside&gt; </code></pre> <p>Notice that I'm using a <code>section</code> element to wrap the <code>article</code> elements and using the <code>aside</code> for the advertisment block. You could put divs inside either for further purposes, but the above is a light, utility-wrapper free document, which I think is a good place to start before adding in further divs, etc.</p> <h3>CSS:</h3> <pre><code>#articles { position: absolute; } #articles &gt; article { background-color: #d9dde1; width:300px; height:250px; margin: 10px; margin-left: 20px; margin-right: -140px; border: solid 10px #1d2631; } #advertisement { float: right; background-color: #d9dde1; width: 125px; height: 605px; margin: 10px; border: 1px dashed black; }​ </code></pre> <p>Notice that the section, as the wrapper for the article elements, is set to absolute, and no other positioning, floats, or negative margins are set to the articles. The aside is set to float right, which makes it float to the top of it's parent (in this case, we assume the body or html tag) which is also the parent of the section, so they are side by side.</p> <p>I do admit that I'm not clear why the section (or div, or whatever) has to be set to absolute for the float to actually push the others aside, but I'm sure someone else here can clear that up.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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