Element outside container without creating scrollbars

Question

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>

score 1 · Answer 1 · answered Nov 10 '12 at 23:13

1

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;

#main {
    width: 500px;
    margin: 0 auto;
    background: red;
    position: relative;
    overflow:hidden;
}

answered Nov 10 '12 at 23:13

Erdinç Çorbacı

1,187
14
17

I don't want the overflowing parts to be hidden. Sorry maybe this was unclear :) – Markus Hedlund Nov 11 '12 at 17:25
as long as you keep using position absolute/relative and negative margin and strict width this is not possible. Use float and max/min-width to build style. And a surrounding container div. – Erdinç Çorbacı Nov 12 '12 at 13:42

score 1 · Accepted Answer · answered May 13 '13 at 00:30

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/

<style type="text/css">
#main {
min-width:500px;
margin: 0 auto;    
position: relative;
overflow: hidden;
}
#inside{
width:500px;
margin:0 auto;
height:100%;
position:relative;
background: red;
}
#banner {
background: green;
position: absolute;
right: -50px;
width: 150px;
height: 300px;
}
#content {
width: 400px;
height: 500px; /* Simulate content */
background: blue;
}
</style>

<div id="main">
   <div id="inside">
      <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>
</div>

score 0 · Answer 3 · answered Nov 10 '12 at 23:08

0

You can use responsive CSS and hide the banner when the content plus the banner are higher than the viewport:

@media only screen and (max-width: 550px) {
        #banner { display: none;}
    }

answered Nov 10 '12 at 23:08

Vicent Ibáñez

439
1
6
10

Also, you can change the witdh or the margin to make the banner still in the page – Vicent Ibáñez Nov 10 '12 at 23:09
But if you resize the window, so the banner is out of the window, and you don't want a scrollbar… isn't this the same that hide the banner when there isn't enough space in the viewport? Anyway, with responsive CSS you can change the properties of the banner and, maybe, move it inside the content, or change the width. – Vicent Ibáñez Nov 11 '12 at 20:40
Then I would have to dynamically resize `#banner` depending on window width. – Markus Hedlund Nov 12 '12 at 08:21

Element outside container without creating scrollbars

3 Answers3

Linked