Keep an element visible, but prevent from overflowing its parent?

Is there a way to make an element not contribute to parent overflow, but keep it visible? Let me clarify

There is a watermark-like logo to be applied to a page in the manner below. It is supposed to be positioned partly outside the main content (dashed blue line)

I'm not aware of the option to set an element background in such a manner that it would persist as the browser window is resized horizontally, so I've just added a <div> with the logo as its background and position:absolute with the necessary offset relative to main content container.

Previously, the page would not get a horizontal scrollbar as long as the browser was wider than W1. Now, with an additional "watermark" element added outside of the main content box, the scrollbar would appear whenever the browser is narrower than W2

Is there something obvious I'm missing? A background setting, or possibly a neat margin workaround/

Update:

I've added a rough jsfiddle to illustrate the issue

Answers


Unfortunately, just because you nested the "watermark" div and positioned it absolutely doesn't make it outside of the document. If you put it outside of the document, the page will scroll (as you see).

To me, the first solution I think of is to move the watermark outside of the "content" div and apply the watermark to its parent container. I'm guessing you haven't done that because you need it to be relative to the "content" div, but it's something to try.

Also, the reason it scrolls is because the document has been overflow. The quick fix, yet not recommended, is to use "overflow-x: hidden;" on the parent container of the "content" div.

It's harder to give you a solution since you've stripped the rest of your HTML, and some "fixes" may not be as applicable if your structure is complicated in certain ways.


Remember that the width of your elements is greater than the actual "width" it includes padding & margins, if you have padding on your div reduce the "width" by the equivalent amount.

does that make sense? if you post the actual css & html it might be easier to give you a more detailed answer

additionally could you not assign the image as the background of the actual body element and set it to centered?

I've had a play with the code and come up with a possible solution for you.

set

body{overflow-x:hidden;}

then add

@media all and (max-width: 400px)
{
 body{overflow-x:auto;   }
}

as soon as your screen is smaller than 400px (the width of the div) your overflow:hidden will be overridden and you'll be given you scroll bars.

at this point you may also want to reduce the width of your watermark.


Need Your Help

Bootstrap 3 un collapsing class in error

javascript jquery twitter-bootstrap-3 collapse

I've got a weird problem. I'm using Twitter Bootstrap 3, JQuery plus JQuery Validate and Hash to build an accordion menu. In my code I have the following line to collapse a panel:

Create a table with unique and random name from my web application

mysql database yii

I am trying to create a temporary table in my database from my yii application. I want the tables to give a randomly generated name(preferably concatenated with 'user_'). I tried the below code. Bu...