Margin Issue With Extra Large Block Element

Question

The Margin Issue
I am working with extra large block elements (2000-4000px for both width and height) and most of these elements overflow the window/viewport. That is fine and is the intended effect of my application. However, when I apply margin to the element on all sides, say 40px, it is applied only to the top, left, and bottom sides. The far right edge is flush with the edge of the window after scrolling over. I am looking to have an even margin on all sides of the block element.

The Code
See below or view this jsFiddle of a reduced test case.

<!-- HTML -->

<div></div>

/* CSS */

* {
    margin: 0;
    padding: 0;    
}

div {
    background: #000;
    height: 3000px;
    margin: 40px;
    width: 3000px;    
}​

What I Have Tried
I have tried the above method, which I initially assumed would work, but it didn't. I have also tried applying a padding of 40px to the body element, and removing the margin from the div altogether, but got the same result. The same was true for a containing element with padding applied.

Any help would be greatly appreciated. Thanks!

Answer 1

How about making your div an inline-block element.

Add display:inline-block to your div and that should solve the issue.

See the updated fiddle- DEMO