 <p>One quick solution is to change your html structure and move sidebar as first child of div wih id <code>#tekst</code>:</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>body { background: #98c8d7; width: 1000px; margin: auto; font-family: "Trebuchet ms", Verdana, sans-serif; } #header { background: #fff url(banner.jpg) no-repeat; margin: 10px 0 10px 0; padding: 8em 2em 1em 2em; text-align: center; border-radius: 15px; opacity: 0.8; border: 1px dotted #000 } /*Dette formaterer menuen */ ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } li { float: left; } a:link, a:visited { display: block; width: 312.5px; font-weight: bold; color: #000; background-color: #51a7c2; text-align: center; padding: 4px; text-decoration: none; text-transform: uppercase; border: 1px solid #91cfca; opacity: 0.8; } a:hover, a:active { background-color: #98c8d7; } #content { background: #b4cdd9; color: #000; padding: 1em 1em 1em 1em; top right bottom left } #tekst { background: #98c8d7; color: #000; opacity: 0.8; margin: 5px 0 5px 0; padding: 0.5em 1em 1em 1em; text-align: left; } #sidebar { background: #b4cdd9; color: #000; width: 320px; position: relative; float: right; margin: 5px 0 5px 0; padding: 0.5em 1em 1em 1em; text-align: left; border-style: outset; border-width: 3px; border-color: black; } a { color: #0060B6; text-decoration: none; } a:hover { color: #00A0C6; text-decoration: none; cursor: pointer; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt; &lt;!-- Denne div indeholder dit content, altså din brødtekst --&gt; &lt;div id="content"&gt; &lt;!--Header. Indeholder banner --&gt; &lt;div id="header"&gt;&lt;/div&gt; &lt;!-- Menu --&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="forside.html"&gt;Forside&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="priser.html"&gt;Priser&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="kontakt.html"&gt;Kontakt&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;!-- Her kommer din brødtekst så --&gt; &lt;div id="tekst"&gt; &lt;div id="sidebar"&gt; &lt;!-- move it here --&gt; &lt;h3&gt;Leon Laksø&lt;/h3&gt; &lt;p&gt;Så-og-så-mange år i tjeneste, certificeret bla bla, alt muligt andet shit her. Måske et billede hvor du ser venlig ud?&lt;/p&gt; &lt;p&gt;Mail link kunne være her?&lt;/p&gt; &lt;/div&gt; &lt;h1&gt;Overskrift 1&lt;/h1&gt; &lt;p&gt;Her kan du skrive, hvad du tilbuder, hvorfor, hvorledes, til hvem og anden info&lt;/p&gt; &lt;!-- Overskrift to. Der er flere former for overskrifter. H1 betegner en bestemt slags, H2 en mindre slags osv. Du kan godt bruge H1 flere gange --&gt; &lt;h2&gt;Underoverskrift 1&lt;/h2&gt; &lt;p&gt;Her kan du måske skrive lidt om dig selv og dine kvalifikationer?&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt;</code></pre> </div> </div> </p>