CSS: Floated element after the content in code <p>I need to have a floated element after the content/text that's supposed to flow around it in my code for SEO reasons. Usually floats are done like so:</p> <p>CSS:</p> <pre><code>#menu { float: right; width: 180px; padding: 10px; background: #fcc; margin: 0 0 15px 15px; } </code></pre> <p>HTML:</p> <pre><code>&lt;div id="menu"&gt;This is a right float. The long text flows around it.&lt;/div&gt; &lt;div id="content"&gt;&lt;p&gt;This is a long text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent nec risus. Praesent adipiscing aliquet magna. Proin bibendum velit vitae tortor. Vestibulum a dui quis urna feugiat viverra. Vestinbulum diam dui, ullamcorper in, rhoncus at, facilisis at, lorem. Phasellus turpis metus, sodales sit amet, laoreet nec, aliquet sit amet, tortor. Vivamus massa orci, gravida sit amet, dictum quis, euismod a, est. Aenean pretium facilisis nunc.&lt;/p&gt; &lt;p&gt;Nulla eros mauris, egestas eget, ullamcorper sed, aliquam ut, nulla. Phasellus facilisis eros vel quam. Etiam rutrum turpis a nibh. Integer ipsum. Vestibulum lacus diam, varius in, blandit non, viverra sit amet, sapien. Sed porta sollicitudin nibh. Nam eget metus nec arcu ultricies dapibus.&lt;/p&gt;&lt;/div&gt; </code></pre> <p>But I need to have the HTML like this:</p> <pre><code>&lt;div id="content"&gt;&lt;p&gt;This is a long text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent nec risus. Praesent adipiscing aliquet magna. Proin bibendum velit vitae tortor. Vestibulum a dui quis urna feugiat viverra. Vestinbulum diam dui, ullamcorper in, rhoncus at, facilisis at, lorem. Phasellus turpis metus, sodales sit amet, laoreet nec, aliquet sit amet, tortor. Vivamus massa orci, gravida sit amet, dictum quis, euismod a, est. Aenean pretium facilisis nunc.&lt;/p&gt; &lt;p&gt;Nulla eros mauris, egestas eget, ullamcorper sed, aliquam ut, nulla. Phasellus facilisis eros vel quam. Etiam rutrum turpis a nibh. Integer ipsum. Vestibulum lacus diam, varius in, blandit non, viverra sit amet, sapien. Sed porta sollicitudin nibh. Nam eget metus nec arcu ultricies dapibus.&lt;/p&gt;&lt;/div&gt; &lt;p id="menu"&gt;This is a right float. Because it's placed below the text in code, it also appears that way.&lt;/p&gt; </code></pre> <p>Basically, I need this HTML to look like the previous example (HTML and CSS). How can I do this?</p> <p>The width of the floated element is constant, but the height can change. The content has to flow around it. The reason I need to have it this way is because the floated element is the menu, which doesn't contain any important text and is usually the same for many pages, so the content should be topmost in the code.</p>