A common trick for vertical positioning elements is to use the following CSS:
.item {
position:absolute;
top:50%;
margin-top:-8px; /* half of height */
height: 16px;
}
When seen in the metric view as in Chrome this is what you see:
However, there is no visual margin depicted when you hover over the element i.e. the margin is 'outside' the border and can be visualized. But negative margins don't show up. How do they look and what is it that makes it different?
Why is margin-top:-8px not the same as margin-bottom:8px?
So just how do negative margins work and what's the intuition behind them. How do they 'bump up' (in case of margin-top < 0) an item?
Negative margins are valid in css and understanding their (compliant) behaviour is mainly based on the box model and margin collapsing. While certain scenarios are more complex, a lot of common mistakes can be avoided after studying the spec.
For instance, rendering of your sample code is guided by the css spec as described in calculating heights and margins for absolutely positioned non-replaced elements.
If I were to make a graphical representation, I'd probably go with something like this (not to scale):
The margin box lost 8px on the top, however this does not affect the content & padding boxes. Because your element is absolutely positioned, moving the element 8px up does not cause any further disturbance to the layout; with static in-flow content that's not always the case.
Bonus:
Still need convincing that reading specs is the way to go (as opposed to articles like this)? I see you're trying to vertically center the element, so why do you have to set margin-top:-8px; and not margin-top:-50%;?
Well, vertical centering in CSS is harder than it should be. When setting even top or bottom margins in %, the value is calculated as a percentage always relative to the width of the containing block. This is rather a common pitfall and the quirk is rarely described outside of w3 docos
I'll try to explain it visually:
/**
* explaining margins
*/
body {
padding: 3em 15%
}
.parent {
width: 50%;
width: 400px;
height: 400px;
position: relative;
background: lemonchiffon;
}
.parent:before,
.parent:after {
position: absolute;
content: "";
}
.parent:before {
top: 0;
bottom: 0;
left: 50%;
border-left: dashed 1px #ccc;
}
.parent:after {
left: 0;
right: 0;
top: 50%;
border-top: dashed 1px #ccc;
}
.child {
width: 200px;
height: 200px;
background: rgba(200, 198, 133, .5);
}
ul {
padding: 5% 20px;
}
.set1 .child {
margin: 0;
position: relative;
}
.set2 .child {
margin-left: 75px;
position: relative;
}
.set3 .child {
margin-left: -75px;
position: relative;
}
/* position absolute */
.set4 .child {
top: 50%;
left: 50%;
margin: 0;
position: absolute;
}
.set5 .child {
top: 50%;
left: 50%;
margin-left: 75px;
position: absolute;
}
.set6 .child {
top: 50%; /* level from which margin-top starts
- downwards, in the case of a positive margin
- upwards, in the case of a negative margin
*/
left: 50%; /* level from which margin-left starts
- towards right, in the case of a positive margin
- towards left, in the case of a negative margin
*/
margin: -75px;
position: absolute;
}
<!-- content to be placed inside <body>…</body> -->
<h2><code>position: relative;</code></h2>
<h3>Set 1</h3>
<div class="parent set 1">
<div class="child">
<pre>
.set1 .child {
margin: 0;
position: relative;
}
</pre>
</div>
</div>
<h3>Set 2</h3>
<div class="parent set2">
<div class="child">
<pre>
.set2 .child {
margin-left: 75px;
position: relative;
}
</pre>
</div>
</div>
<h3>Set 3</h3>
<div class="parent set3">
<div class="child">
<pre>
.set3 .child {
margin-left: -75px;
position: relative;
}
</pre>
</div>
</div>
<h2><code>position: absolute;</code></h2>
<h3>Set 4</h3>
<div class="parent set4">
<div class="child">
<pre>
.set4 .child {
top: 50%;
left: 50%;
margin: 0;
position: absolute;
}
</pre>
</div>
</div>
<h3>Set 5</h3>
<div class="parent set5">
<div class="child">
<pre>
.set5 .child {
top: 50%;
left: 50%;
margin-left: 75px;
position: absolute;
}
</pre>
</div>
</div>
<h3>Set 6</h3>
<div class="parent set6">
<div class="child">
<pre>
.set6 .child {
top: 50%;
left: 50%;
margin: -75px;
position: absolute;
}
</pre>
</div>
</div>
Margin is the spacing outside your element, just as padding is the spacing inside your element.
Setting the bottom margin indicates what distance you want below the current block. Setting a negative top margin indicates that you want negative spacing above your block. Negative spacing may in itself be a confusing concept, but just the way positive top margin pushes content down, a negative top margin pulls content up.
good points already made here, but while there is lots of information about how rendering of margins is accomplished by the browser, the why isn't quite answered yet:
"Why is margin-top:-8px not the same as margin-bottom:8px?"
what we also could ask is:
Why doesn't a positive bottom margin 'bump up' preceding elements, whereas a positive top-margin 'bumps down' following elements?
so what we see is that there is a difference in the rendering of margins depending on the side they are applied to - top (and left) margins are different from bottom (and right) ones.
things are becoming clearer when having a (simplified) look at how styles are applied by the browser: elements are rendered top-down in the viewport, starting in the top left corner (let's stick with the vertical rendering for now, keeping in mind that the horizontal one is treated the same).
consider the following html:
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
analogous to their position in code, these three boxes appear stacked 'top-down' in the browser (keeping things simple, we won't consider here the order property of the css3 'flex-box' module). so, whenever styles are applied to box 3, preceding element's positions (for box 1 and 2) have already been determined, and shouldn't be altered any more for the sake of rendering speed.
now, imagine a top margin of -10px for box 3. instead of shifting up all preceding elements to gather some space, the browser will just push box 3 up, so it's rendered on top of (or underneath, depending on the z-index) any preceding elements. even if performance wasn't an issue, moving all elements up could mean shifting them out of the viewport, thus the current scrolling position would have to be altered to have everything visible again.
same applies to a bottom margin for box 3, both negative and positive: instead of influencing already evaluated elements, only a new 'starting point' for upcoming elements is determined. thus setting a positive bottom margin will push the following elements down; a negative one will push them up.
A margin-top of -8px means it will be 8px higher than if it had 0 margin.
A margin-bottom of 8px means that the thing below it will be 8px further down that if it had 0 margin.
Because you have used absolute positioning, and specified a top percentage, only margin-top will affect the location of your .item object. If instead you positioned it using bottom: 50%, then you'd need margin-bottom -8px to centre it, and margin-top would have no effect.
Margin affects the boundaries of an element in terms of positioning it, either absolutely as in your case, or relative to neighbouring elements. Imagine that margin is the foundations of your element on which it sits. They are typically the same size as it, but can be made larger or smaller on any or all of the four edges.
Your CSS tells the browser to position the top of your element the margin at a point 50% of the way down the page. However, as all elements are not a single pixel, the browser needs to know which part of it to line up 50% of the way down the page. For lining up the top of the element, it uses the top margin. By default this is in line with the top of the element, but you can alter it with CSS.
In your case, top 50% would result in the top of the element starting in the middle of the page. By applying a negative top margin, the browser uses the point 8px into the element from the top (ie the line across the middle of it) as the place to position at 50%.
If you apply a positive margin to the bottom, this extends the line the browser uses to position the bottom out away from the element itself, giving a gap between it and any adjacent element below, or affecting where it is placed absolutely if positioning based on the bottom.
I wonder if this question has been answered well: how css margins work and why is it that margin-top:-5; is not the same as margin-bottom:5;?
Margin is distance from the surroundings of the element. margin-top says "... distance from surroundings as we measure from top 'side' of the element's 'box' and margin-bottom being the distance from the bottom 'side' of the 'box'". Then margin-top:5; is concerned with the top 'side' perimeter,-5 in that case; anything approaching from top 'side' can overlap top 'side' of element by 5, and margin-bottom:5; means distance between element bottom 'side' and surrounding is 5.
Basically that but affected by float'ed elements and the like: http://www.w3.org/TR/CSS2/box.html#margin-properties.
http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
I stand to be corrected.
Just to phrase things differently from the great answers above, as that has helped me get an intuitive understanding of negative margins:
A negative margin on an element allows it to eat up the space of its parent container.
Adding a (positive) margin on the bottom doesn't allow the element to do that - it only pushes back whatever element is below.
Related
Question 1: Is there any way of automatically having an element fill the space between two margin-collapsed siblings, without adding to the space between the two?
Question 2: If not, is there any way of knowing the actual (after margin collapsing) space between two elements when margins are collapsed?
Background: I have a page with a vertical list of items. These items have different vertical spacing (i.e. margin)s depending on their content -- i.e. an image item has top and bottom margin of 100px, a text item has 50px vertical margin. In order to have good vertical rhythm, margin collapsing is used intentionally.
Now, I need "filler" elements that each take up all the vertical space between each item. For example, between an image item and text item, the "filler" would need to be 100px tall to fill the margin-collapsed space between the two items. Here's an example, with the pink filler filling all the space:
Problem: The list of items is dynamic, so I don't know ahead of time how much space will be in between the items. Because the margins collapse, I can't know ahead of time how tall to make the filler element. I am hoping to avoid having to spell out filler height based on every permutation of item combinations, each with its own value of the spacing between the two item types.
I can't have the filler element affect the space between the two elements (so it's position: absolute). Since it's position: absolute, I don't see a way of anchoring it to both the item above it and below (only to one of them).
Here is an example of manually setting the height for the filler to fill the space: https://jsfiddle.net/41pgv63s/
Is there any other way of being able to fill the space between two elements that are margin-collapsed, without increasing the space between them? I'd like to not have to manually look at the previous/next item and calculate the filler's height based on that. I'm hoping against hope that there's a CSS-only way to fill the space between the two items, so I don't need to know the context between every neighboring item in the list before setting the height of the filler item.
There are many solutions to this, but the quickest came to my mind was this:
.in-between-dweller {
background-color: rgba(255,128,255, 0.3);
position: absolute;
bottom: -100%;
left: 0;
height: 100%;
width: 100%;
}
.container {
position: relative;
}
.box {
height: 100px;
border: 1px solid #AAA;
background-color: #FAFFBB;
}
.one {
margin-bottom: 50px;
}
.two {
margin-top: 100px;
}
.in-between-dweller {
background-color: rgba(255,128,255, 0.3);
position: absolute;
bottom: -100%;
left: 0;
height: 100%;
width: 100%;
}
<div class="container">
<div class="box one">Box One (margin-bottom: 50px)</div>
<div class="in-between-dweller">I'm supposed to cover all the space between the two boxes...</div>
</div>
<div class="container">
<div class="box two">Box Two (margin-top: 100px)</div>
</div>
My understanding is once an element is positioned absolute (even with a negative position value), it will completely out of the normal content flow. But why does it still make the page to overflow? When you run code snippet below, the horizontal scrollbar appears, I thought it shouldn't be there.
.relative {
position: relative;
background: pink;
}
.absolute {
position: absolute;
top: 0;
right: -100px;
width: 200px;
height: 100px;
background: rgba(0,0,0,.5);
}
<div class="relative">
Placeholder <div class="absolute"></div>
</div>
I think I know where this question comes from. You must be confused by people using (negative) absolute positioning on the LEFT side of the screen when they want an element to be off screen WITHOUT horizontal scrollbars. This is a common technique for sliders, menu's and modals.
The thing is that a negative LEFT allignment does NOT show overflow on the body, while a negative right allignment does. Not very logical... I know.
To illustrate this I created a pen with the absolute element on the left: left: -100px; http://codepen.io/anon/pen/vGRxdJ and a pen with the absolute element on the right: right: -100px; http://codepen.io/anon/pen/jqzBZd.
I hope this takes away your confusion.
As to why this happens: I have always understood that the top left corner of the screen is x:0, y:0: the origin of a coordinate system consisting only of positive values (which is mirrored horizontally in the RTL case). Negative values in this coordinate system are 'off-canvas' and thus need no scrollbar, while 'on-canvas' elements do. In other words: on-canvas elements will enlarge your page and make your view automatically scrollable (unless instructed otherwise), while off-canvas elements will not.
absolute: the element is removed from the flow of the document and other elements will behave as if it’s not even there whilst all the other positional properties will work on it.
CSS-Tricks
This means that the layout of the page and the size and position of other elements won't change. The width of the page does change, as we've seen, but that's not called layout.
Page layout is the part of graphic design that deals in the arrangement of visual elements on a page. It generally involves organizational principles of composition [...]
Wikipedia
When the width changes, the composition of the elements does not change (at least, in this case), so the layout does not change. The width does change, but this is supposed to happen. If you're now asking yourself: "But why?", read the next bit.
About "why" questions: There isn't always a real why; it's the way it is, and you either use it or you sit still and question it. It isn't that much of a problem either. Elements not being able to overflow the window, that would be a problem. More about "why" questions. I'm not saying all "why" questions are bad, but if you ask if a certain feature should exist there may not be a good answer, but only a good or sufficient solution.
Solution: add overflow-x: hidden to the CSS of the body. When you add it to .relative, a different part of .absolute will be cut off as well, because .absolute has more height.
When you add overflow-x:hidden everything outside the body with full width will be invisible, and therefore it won't stretch the page.
body {
overflow-x:hidden;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
right: -100px;
width: 200px;
height: 100px;
background: grey;
}
<div class="relative">
<div class="absolute"></div>
</div>
You can get the result you're expecting in two ways. Either make body { overflow-x: hidden; }, or change the .absolute <div> to position:fixed.
Now for the answer to your question.
why does it still make the page scrollable?
Because position:absolute is positioned relative to the nearest positioned ancestor.
And a position:absolute <div> will make an area scrollable to the right or bottom if it overflows to the right/bottom.
Check Fiddle
Conversely, position:fixed is positioned relative to the viewport. It will not overflow on any side. Fiddle
Here are some links for explaining position.
Absolute positioning:
This will scroll, but is out of page flow.
Is usually moved from original position.
Fixed positioning:
This will NOT scroll, and is out of flow.
Is usually moved from original position.
Reference
body {
overflow-x: hidden;
}
.relative {
position: relative;
background: pink;
}
.absolute {
position: absolute;
top: 0;
right: -100px;
width: 200px;
height: 100px;
background: rgba(0,0,0,.5);
}
<div class="relative">
Placeholder <div class="absolute"></div>
</div>
Hope it helps.
I have read through the CSS 2.1 Docs (CSS3 did not change the visual formatting sections), and this is as explicit as I could find.
Section 2.3.1
For all media, the term canvas describes "the space where the formatting structure is rendered." The canvas is infinite for each dimension of the space, but rendering generally occurs within a finite region of the canvas, established by the user agent according to the target medium.
Section 9.1
User agents for continuous media generally offer users a viewport (a window or other viewing area on the screen) through which users consult a document.
When the viewport is smaller than the area of the canvas on which the document is rendered, the user agent should offer a scrolling mechanism.
So, when you add an absolutely positioned element, even though it does not increase the width of its containing block, it increases the size of the canvas. The browser then offers a scrolling mechanism to allow you to view the entire canvas.
To be clear, the scrolling does not occur because <div class="relative"> became wider, or even because <body> or some other block became wider. It was because the underlying canvas on which the document was rendered became larger.
If you position an element absolutely, the hight and width of the wrapping element depends on its content. Even the overflow.
To not hide the wrapping element and remove the scroll bar, you should remove the overflow of the body tag.
body {
overflow: hidden;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
right: -100px;
width: 200px;
height: 100px;
background: grey;
}
<div class="relative">
<div class="absolute"></div>
</div>
Your understanding is once an element is positioned absolute (even with a negative position value), it will completely out of the normal content flow.
You are right, but, Read it once again.
The sentence "it will completely out of the normal content flow" it doesn't mean that it will be hidden if it will be out of its container.
If you want it to be hidden out of the container, then the parent should be overflow: hidden.
Here in your case it has made a page to overflow because default overflow property values is visible. It should be there as per W3C.
W3C: https://www.w3.org/TR/css3-positioning/#abs-pos
In the absolute positioning model, a box is explicitly offset with respect to its containing block. It is removed from the normal flow entirely (it has no impact on later siblings). An absolutely positioned box establishes a new containing block for normal flow children and absolutely (but not fixed or page) positioned descendants. However, the contents of an absolutely positioned element do not flow around any other boxes. They may obscure the contents of another box (or be obscured themselves), depending on the stack levels of the overlapping boxes.
MDN: https://developer.mozilla.org/en/docs/Web/CSS/position
Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to nearest positioned ancestor (non-static). If a positioned ancestor doesn't exist, the initial container is used.
Even if you make your .relative to fixed width and set overflow: hidden then horizontal also scroll appears.
See below:
.relative {
position: relative;
background: pink;
width: 500px;
overflow: auto;
}
.absolute {
position: absolute;
top: 0;
right: -100px;
width: 200px;
height: 100px;
background: rgba(0,0,0,.5);
}
<div class="relative">
Placeholder <div class="absolute"></div>
</div>
You can simply add overflow hidden to relatively position element and give its the height you want. From my perspective it is the best solution. And play around with the absolutely positioned div.
.relative {
position: relative;
background: pink;
overflow:hidden;
}
.absolute {
position: absolute;
top: 0;
right: -100px;
width: 200px;
height: 100px;
background: rgba(0,0,0,.5);
}
Speaking about floating sidebar, lately I was working on that and I found very simple solution that can be useful especially in case you don't have access or do not want to apply styles on body element.
Just want to leave it here, maybe it can be useful for somebody.
scss code below
$sidebar-width: 413px;
.right-sidebar-wrapper {
position: absolute;
top: 0;
right: 0;
z-index: 999;
height: 100%;
width: $sidebar-width;
overflow-x: hidden;
transition: width 500ms;
&.isHidden {
width: 0;
}
.right-sidebar {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: $sidebar-width;
}
}
The point here is to place one absolute positioned element inside another which has overflow-x: hidden and then make transition not by right coordinate but by width to collapse parent block.
This right sliding sidebar works perfectly for me.
As you can see in the demo below, margin: auto; centers the blue div horizontally, but not vertically. Why not?
.box {
border: 1px solid red;
width: 100px;
height: 100px;
}
.center {
background: blue;
width: 50px;
height: 50px;
margin: auto;
}
<div class="box">
<div class="center"></div>
</div>
My question is not asking for workarounds.
As mentioned, this behavior is specified in section 10.6.2 of CSS2.1, and has remained unchanged from CSS2.
Block boxes are stacked vertically from top to bottom in normal flow. Furthermore, vertical margins may collapse, and only do so under certain circumstances (in your demo, the border on the parent element will prevent any margins on the child element from collapsing with its own). If you only have one such block box, and the height of the containing block is auto, then its top and bottom margins will be zero anyway. But if you have more than one block box in the same flow, or even out-of-flow boxes affecting the layout of in-flow boxes (in the case of clearance for example), how would you expect auto margins to resolve for those in-flow boxes?
This is why auto left and right margins are likewise zeroed out for inline elements (including atomic inlines) and floats (though horizontal margins never collapse). Inline-level boxes are laid along line boxes, and floats too obey unique layout rules.
Absolutely positioned boxes are a different story: since they are never aware of any other boxes in the same positioning context as themselves, auto top and bottom margins can be calculated for them with respect to their containing blocks without having to worry about any other boxes ever interfering.
Flexbox is also a different story: what sets flex layout apart from block layout is that flex items are by definition always aware of other flex items in the same flex formatting context, including the fact that there are none. In particular, neither can floats intrude into the flex container, nor can you float flex items to subvert this (although you can still remove a child element from flex layout completely with absolute positioning). Margins behave very differently with flex items due in part to this. See sections 4.2, 9.5 and 9.6.
Why...because the W3C spec says so.
If 'margin-top', or 'margin-bottom' are 'auto', their used value is 0.
As to the actual "why"...the query should really be addressed there.
It doesn't center the element vertically because it is a block-level element in the normal flow. Thus, the following rule applies:
If margin-top, or margin-bottom are auto, their used value is 0.
It's also worth pointing out that the rule above also applies to the following elements as well: (see points 10.6.2 and 10.6.3 for more information and conditions).
Inline replaced elements
Block-level replaced elements in normal flow
inline-block replaced elements in normal flow
Floating replaced elements
Block-level non-replaced elements in normal flow when overflow computes to visible
With that being said, absolutely positioned, non-replaced elements that don't have top, height, and bottom values of auto are an exception to this rule. The following applies from point 10.6.4:
If none of the three top, height, and bottom are auto and if both margin-top and margin-bottom are auto, solve the equation under the extra constraint that the two margins get equal values.
See the example below demonstrating how an absolutely positioned element is vertically centered using margin: auto. It works because none of the three properties top, height, and bottom have a value of auto:
.box {
border: 1px solid red;
width: 100px;
height: 100px;
position: relative;
}
.center {
background: blue;
width: 50px;
height: 50px;
margin: auto;
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
}
<div class="box">
<div class="center"></div>
</div>
In addition, it's probably worth pointing out the following rule as well:
If one of margin-top or margin-bottom is auto, solve the equation for that value. If the values are over-constrained, ignore the value for bottom and solve for that value.
This means that if the absolutely positioned element has a margin-top value of auto and a margin-bottom value of 0 (i.e., margin: auto auto 0), the element would be absolutely positioned at the bottom relative to the parent like in the example below:
.box {
border: 1px solid red;
width: 100px;
height: 100px;
position: relative;
}
.center {
background: blue;
width: 50px;
height: 50px;
margin: auto auto 0;
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
}
<div class="box">
<div class="center"></div>
</div>
Why doesn't margin:auto work vertically?
Actually, it does – just not for every display value.
If display is flex, margin: auto centers both vertically and horizontally.
The same applies to display: inline-flex, display: grid and display: inline-grid.
.box {
border: 1px solid red;
width: 100px;
height: 100px;
display: flex; /* new */
}
.center {
background: blue;
width: 50px;
height: 50px;
margin: auto;
}
<div class="box">
<div class="center"></div>
</div>
It's because of the actual possibility of knowing the true height of the element in which you want to center vertically in. To understand that, first think about how auto horizontal centering works. You have a div which you've given it a width (fixed or percentage). The width can be calculated to certain degree. If it's fixed width, great. If it's flexible or responsive (percentage) at least you have a range that the width will cover before it hits the next breakpoint. You take that width, minus whatever it's inside and split the remainder on both sides.
Now, with that information, how could the browser calculate the infinite amount of variations in which your div will grow vertically? Keep in mind the size of the element, wrapping of text, paddings, and responsiveness will also alter the width and force the text to wrap further, and on, and on it goes.
Is it an impossible task? Not really, has CSS spent time and effort covering this? Not worth their time, I guess.
And that is basically the answer I tell my students.
But....fret not! Bootstrap v4 alpha has figured out vertical centering!
EDIT
Sorry to edit this late but I thought you may want to consider this solutions to center vertically and it is pretty simple by making use of the calc function
<div class="foo"></div>
.foo {
background-color: red;
height: 6em;
left: calc(50% - 3em);
position: absolute;
top: calc(50% - 3em);
width: 6em;
}
See it HERE
I'm making a pong clone using HTML/CSS/Js. I've set a div element to act as a border for the game, just to keep things in a confined space. How do I get elements (for example, a scoreboard) to act relative to their parent element? For example, if I tell the child to move 50% left, it moves to the center of the parent-div, and NOT to the center of the web-page. Basically I want the child confined by the dimensions of their parent (haha). It seems like
child-div {
position:relative;
}
in CSS would do the trick, but it's not...maybe it's because I'm developing in CodeAcademy's IDE?
position:relative means relative to itself not parents/children etc. It seems likely that you want relative on the parent and possibly absolute on the children. Without code, it's hard to help much further
Here's a quick demo for you.
.container {
width: 80%;
height: 250px;
margin: 0 auto;
position: relative;
border: 4px solid green;
}
.scoreboard {
width: 200px;
height: 50px;
background: lightblue;
border: 2px solid grey;
position: absolute;
top: 10px;
/* just for a bit of space */
left: 50%;
/*almost centered*/
margin-left: -100px;
/* half of known width */
}
<div class="container">
<div class="scoreboard"></div>
</div>
Note...there are other centering methods for absolutely positioned divs depending on whether the width is known and browser support requirements
left: 50%; does not center an element...it moves the element's top/left corner to the center of the containing element. You have to move it back half of it's width (if known)...see above.
One final point....positioned elements are not constrained to their ancestor elements but rather positioned in relation to them. It's quite common to have positioned elements outside the bounds of parents.
I have a <div id="wrapper"></div> with
#wrapper {
height: 300px;
margin: 10px;
position: absolute;
top: 0;
left: 0;
width: 400px;
}
When I resize the viewport so that horizontal scrollbars appear, the right margin disappears; I can only scroll as far right at the element's content, but I want the margin to be present on all sides. It also happens to the left margin if right: 0; is applied, and to the bottom margin if the viewport is made shorter. Giving wrapper a position: static; (default) makes no difference.
Why is this happening? It doesn't follow normal margin collapse rules. How can I get my margin back? I've tried giving the body padding/margin.. nada.
jsFiddle
Background Info
The default width of the body element is the html width which is also the window width (or iframe width in such a case). The default behavior of a block level element is that the scroll only accounts for the actual element (hence, it doesn't care about the right margin if there is nothing more to display on the right). This causes your right margin issue. (By the way, according to this article, the scroll bars are actually appearing on the html element, not the body.)
For Position: Absolute
By having #wrapper with position: absolute, the body element ends up with zero height. This causes your bottom margin issue in this case.
A solution is to account for the margins like so (see fiddle):
body {
min-height: 320px;
min-width: 420px;
}
This assigns a minimum dimension to the body equal to the width + margins and height + margins of the absolute element.
Now, I'm not sure what you expect to happen if you have right: 0 set, as forcing a left margin to "remain" just ends up causing, in my opinion, a premature scroll bar to activate. See this fiddle.
Regarding Position: Static
The default block level behavior can be changed by forcing a shrink-wrap like behavior on the body element using (see fiddle):
body { display: inline-block; }
Note: that body { float: left; } did not give me the same shrink-wrap behavior (see fiddle).
The inline-block element will account for the margin of its inner elements to determine its own width, which then allows the right margin to work.
The reason the display: inline-block; solution does not work on the #wrapper being position: absolute is because it makes the body have a zero width and height, since the absolute positioning takes that element out of flow and there is nothing left inside body to give it dimension.
The above was currently only tested on IE9.
I'm afraid there's only one simple and quick solution, and that is to create a new div inside the wrapper div.
http://jsfiddle.net/QHKmN/2/
CSS
#wrapper {
background: black;
height: 300px;
margin: 10px;
position: absolute;
top: 0;
left: 0;
width: 400px;
}
#inwrapper {
background: green;
height: 290px;
margin: 5px auto;
position: relative;
width: 390px;
}
HTML:
<div id="wrapper">
<div id="inwrapper">
</div>
</div>
And there's your margin.