Can I make a banner reach outside of its container, without creating horizontal scrollbars if the window is too narrow?
I thought I had done this before with negative margins, but can't get it to work now.
Demo: http://jsfiddle.net/Znarkus/s95uz/
<div id="main">
<div id="banner">I want this to not create a horizontal scrollbar, when the window/frame is too narrow.</div>
<div id="content">
</div>
</div>
You can use a container that has a min-width of 500px or width 100% depending on if you want a scroll bar or none at all; add position relative, and overflow hidden and then inside of that add another container that is your set width of 500px with a margin of auto for the left and right. Put your content inside of the inner container using position absolute; in this case your #banner would be right: -50px;
I've modified your fiddle here: http://jsfiddle.net/s95uz/14/
Just add overflow : hidden to the div "main" css.
Adding this to an element hides the possible conditional sidebars.
Your new css will look like;
You can use responsive CSS and hide the banner when the content plus the banner are higher than the viewport: