position a div so it appears to be outside the mainwrapper (980px)

I want to position a div so it appears to be outside the mainwrapper (980px) of the site. the problem is i don't want there to be horizontal scrollbars in 1024px.

css or jquery solution would be great

any ideas?

the outside开发者_JS百科 bit should be on the right, not the left

Give the main-wrapper a position of relative, and the child element a position of absolute. You can then position the child with left and top.

<style>
  body { overflow-x:hidden }
  #wrapper { position:relative }
  #floating-sidebar { position:absolute; top:0; left:-100px; width:100px }
</style>
<div id="wrapper">
  <div id="floating-sidebar">
    <p>Lorem ipsum...</p>
  </div>
</div>

Any jQuery solution would just act as a middle-man for the aforementioned method, or one similar.

css:

overflow-x: hidden;

Is a brute force way of sorting it

use absolute positioning

Here is an example:

<style>
    #outsideDiv { position:absolute; left:90%; top:0; }
</style>

<div id="container">
    <div id="innerContainer">
        <p>his is some sample text</p>
    </div>
    <div id="outsideDiv">
        <p>This is the text displayed outside the div container</p>
    </div>
</div>