Note that there are some explanatory texts on larger screens.

plurals
  1. POMake a div stretch to the right to infinity
    primarykey
    data
    text
    <p>i need help with some css</p> <p>i've made some example site <a href="http://gidzior.99k.org/inter/" rel="nofollow">http://gidzior.99k.org/inter/</a>, i want to stretch [aside] background (this with "who are we" text) to the right beyond wrapper which is set to 980px, i would like to expand [aside] to the right end of the browser window</p> <p>how to achieve such a thing</p> <p>HTML</p> <pre><code>&lt;div id="main"&gt; &lt;div class="wrapper clearfix"&gt; &lt;section id="blog-posts"&gt; &lt;h2 class="archerBold text-shadow-white pb20"&gt;from the blog&lt;/h2&gt; &lt;article class="blog-post"&gt;&lt;/article&gt; &lt;article class="blog-post"&gt;&lt;/article&gt; &lt;/section&gt; &lt;aside&gt; &lt;section&gt; &lt;h2 class="archerBold text-shadow-white pb20"&gt;who we are&lt;/h2&gt; &lt;/section&gt; &lt;section&gt;&lt;/section&gt; &lt;section&gt;&lt;/section&gt; &lt;/aside&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS</p> <pre class="lang-css prettyprint-override"><code>#main { background: #f8eedf; width: 100%; } #blog-posts { float:left; width: 604px; padding: 50px 50px 50px 0; } aside { float:left; padding: 50px 0 50px 40px; width: 354px; height: 770px; background: #eeddc6; background: -moz-linear-gradient(top, #eeddc6 0%, #f8edde 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeddc6), color-stop(100%,#f8edde)); background: -webkit-linear-gradient(top, #eeddc6 0%,#f8edde 100%); background: -o-linear-gradient(top, #eeddc6 0%,#f8edde 100%); background: -ms-linear-gradient(top, #eeddc6 0%,#f8edde 100%); background: linear-gradient(to bottom, #eeddc6 0%,#f8edde 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeddc6', endColorstr='#f8edde',GradientType=0 ); } .wrapper { width: 980px; padding: 0 10px; margin: 0 auto; } </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