Databases
StackOverflow2013
Postsdbo
POPositioning an images outside of the layout
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPositioning an images outside of the layout
    text
    copied!<p>I am making a website thats 960px wide but I want images on both sides of the header that you can see if you have a bigger screen.</p> <p>because I want to keep the site 960px wide I need these extra side images to not be counted by the browser, I can get it to work on the left</p> <p>see here:</p> <p><img src="https://i.stack.imgur.com/uUU8n.png" alt="enter image description here"></p> <p><a href="http://www.wireframebox.com/test/sideimages/index_leftworks.html" rel="nofollow noreferrer">http://www.wireframebox.com/test/sideimages/index_leftworks.html</a></p> <p>Code:</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;Untitled Document&lt;/title&gt; &lt;style type="text/css"&gt; body { margin: 0; padding: 0; border: 0; background-color:#096 } img { border: 0; } #main { width:960px; height:216px; background-image:url(main.jpg); position:relative; top:0; margin: 0 auto; } #left { width:170px; height:216px; background-image:url(left.jpg); float:left; left:-170px; position:relative; } #right { width:170px; height:216px; background-image:url(right.jpg); float:right; left:170px; position:relative; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="main"&gt; &lt;div id="left"&gt;&lt;/div&gt; &lt;div id="right"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>if you make your window thinner the left red image disappears off the site without causing the browser window to get a bottom scroll bar, however when I try and do the same thing to the right side it doesn't work</p> <p>see here</p> <p><img src="https://i.stack.imgur.com/DxleH.png" alt="enter image description here"></p> <p><a href="http://www.wireframebox.com/test/sideimages/" rel="nofollow noreferrer">http://www.wireframebox.com/test/sideimages/</a></p> <p>Code is equal, only <code>&lt;div id="right"&gt;&lt;/div&gt;</code> is missing</p> <p>the css is in the source.</p> <p>you can also see it being used on this site to show the date sticking out the left of the page, without impacting the overall sites width</p> <p><a href="http://www.tequilafish.com/2009/04/22/css-how-to-pin-an-image-to-the-bottom-of-a-div/" rel="nofollow noreferrer">http://www.tequilafish.com/2009/04/22/css-how-to-pin-an-image-to-the-bottom-of-a-div/</a></p> <p>why does this work on the left but not the right?</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