I have 2 div, one is using position :absolute and another is using position : static (default)
the absolute position by left : 100px.
the static position by margin-left : 100px
Why they aren't the positions at same place?
Posting a link to the fiddle would be nice, but until then you could try setting:
html, body
{
margin: 0;
padding: 0;
}
Since the absolutely positioned div has been taken out of the normal flow of the document, it is most likely that any inconsistencies between the placement of the static div and the absolute div are caused by margin's or padding's set on the elements containing the static div.
Are you sure it isn't the Border width of 2px all the way around (added up) to total 8px?
You need to remove the body margin.
body {
margin:0px;
}
The absolute div is a child of 'HTML'. The static div is a child of 'Body'. Body, by default, has an 8px margin.
Example: http://jsfiddle.net/y5S6W/
Since the elements are displayed in the order they are coded into the page by default, the absolutely positioned div will be in a specific place; however, the 2nd div will be after the first div, which means that its CSS of margin left: 100px; actually moves it over 100px plus the width of the first div from the left side of the page.
Related
My container div does not expand to fit its child div - which has a top: 20px value.
I don't even have floats and have used both overflow:hidden (cuts part of the child div) or overflow:auto (creates scrollbars).
See codepen example: Codepen
<div class="container">
<div id="model">fdsf</div>
</div>
Appreciate any solutions to this problem.
Remove top and position properties and use margin: 10px auto 0 auto;
#model {
background: yellow;
border: 1px solid orange;
width: 100px;
height: 100px;
margin: 10px auto 0 auto;
display: block;
}
Demo
1) In your example, the container is expanding to fit the child div correctly. The height of the child is 100px plus two times the border of 1px, in total 102px. Then, the height of the container is exactly 102px, as the developer tools in any browser can tell you.
Height of the contents totals 102px, thus the inner height of the container is 102px. This is by definition "expanding to fit the contents".
2) Now, you are setting position: relative for your child div. The following quote from Mozilla Developer Network should give a complete explanation to what is happening in your example.
Relative positioning:
This keyword lays out all elements as though the element were not
positioned, and then adjust the element's position, without changing
layout (and thus leaving a gap for the element where it would have
been had it not been positioned). The effect of position:relative on
table-*-group, table-row, table-column, table-cell, and table-caption
elements is undefined.
3)
Obviously, you can get rid of this effect by getting rid of relative positioning, and just using margin instead. Regarding your comment, no, top, right, bottom, and left should absolutely not work. They are meant to be used for a totally different thing, for what the quote above explains.
I have the following html:
<style>
body {
margin: 0;
height: 100vh;
}
div {
margin: 1px;
}
</style>
<body>
<div>feck</div>
</body>
The div's margin causes scroll bars, even tho the div itself is nowhere near the height of the page. Without the div's margin, there is no scroll bar. What's going on? Is this a browser bug?
Collapsing margins. Because the div is the topmost element in the body, the div's margin is collapsed with the body's margin. That is, the body gets the same margin too.
You may think that "collapsing" isn't the right word for this behaviour, and you'd be right, but that's the word they've chosen. Sorry.
There are several solutions:
Sean's solution of simply moving the div a pixel downwards
Your own solution of using calc for the body height
Set a padding on the body, and use box-sizing:border-box for it.
Because a div is a block element. It has positioning in the Dom, therefore takes up space. When you add a margin to the top, you are pushing its space down, therefore increasing the overall amount of space it occupies.
If you want to push the div down, without changing the overall container (body) height, you can give the div a position of relative, and a top of 1px.
div {
position: relative;
top: 1px;
}
Check out this answer it should be clear enough.
The main point is that margins of adjacent elements (in this case your div and body) are collapsing taking the maximum value of the two margins.
I am trying to design a relatively positioned div, which in turn would consist two divs. None of the child divs have a fixed height, but they vary with the content, so the parent div expands with the taller of the child div. Now the design works fine, but when I was analyzing the code with Firebug, I saw that on hovering over the body tag in Firebug, only a short portion of the entire screen at the very top showed as the body. The side-panel confirmed it, the width of the body is ok, but the height is 0. That means the height of the parent div is 0, but Firebug tells me it is not, it is some 560px. How is it possible? I know elements don't expand with their content if the content is absolutely positioned, but here the child divs are relatively positioned, so why doesn't the parent expand with its contents? The fiddle is at http://jsfiddle.net/Cupidvogel/y79NS/6/. Th screenshot (please zoom to understand my point! It is when I try the code as a complete HTML page in Firefox):
In your CSS, div.clear - which you are using to attempt to clear your floats - is itself floated left. That means that it is not part of the document flow either and therefore cannot clear anything.
Removing float does the trick:
.clear { width: 400px; clear: both; position: relative; }
Alternately, if you want div.clear to be floated for some reason, there are a wide variety of other ways to clear your floats.
EDIT: div.main has a height of 520px because it is floated and floated elements "snap" to the dimensions of their children. If you floated body left (please don't; it's not a good idea), it too will "snap" to its children's dimensions and have a set height of 520px.
What here happens is normal browser behavior, you float divs, so there are not in the 'normal' flow anymore because of the float property.
So body is height 0, because body can not calculate height of elements that 'not in there'.
Move you div class="clear" out of the div class="main" and remove the float property aswell on the div class="clear", problem solved.
view: http://jsfiddle.net/y79NS/8/
I have some questions regarding the following css that I found:
html, body {
height:100%;
min-width:100%;
position:absolute;
}
html {
background: none repeat scroll 0 0 #fff;
color:#fff;
font-family:arial,helvetica,sans-serif;
font-size:15px;
}
is it necessary to have height and min-width to 100% on the html and body? What's the benefit?
what is the reason for using position absolute?
why did they set the background/color/font on the html and not the body? Is there a difference? Or is it just preference?
It's usually unnecessary. However, there are a few times where you may need it. For example, maybe your base/site-wide website css file specifies the size to be different (you know those sites where the sides are just borders, usually blogs? Those widths have been resized down). Note that when you have percent it's of the parent container. So Div A may have width: 100% but if it's parent container has width: 500px Div A will have 100% of 500px.
There is no reason for position: absolute on the html + body that I can think of. One side effect of absolute positioning is that the element nolonger "floats inline" with the rest of the elements (not sure how you would describe/word this).
For example, position: relative ignores absolutely positioned elements. So if you had Image A (absolute) and Image B (relative) and B had left: 10px;, Image B would be offset from the left of the parent, instead of where A would have been. Hopefully I'm making sense here.
So sometimes I just set "position: absolute" whenever I have a background image. If it's the first child, it everything will show up on top of it (since the new elements are "added on top" and ignore the absolute-positioned element).
The body will inherit those properties, and so yes it's just preference.
Setting the width or height of an element to 100% only works when its parent element is also at 100% of that dimension. Which means that if the body or even html tag isn't, for some reason, at 100% of either height or width, an element inside it with those properties will have 0 height or width.
For example: http://jsfiddle.net/KZaum/
I have an element that I need so span across the whole screen.
It need to be static positioned because it needs to be in the flow of elements but setting the width to 100% doesn't cover the screen.
I could make it absolute positioned and then set the left and right properties to 0 and it would cover the screen, but then the element would be taken out of the flow of DOM elements and mess it up.
How can I make a static positioned element span the whole screen?
Here is a supporting jsfiddle: http://jsbin.com/uwepij
Elements that are position: static don't, by default, span more than the width of their parent element.
In the case you're seeing, the body element has a margin of 8px on it, so all of the non-absolute positioned elements are limited to that space.
If, however, you know how much extra space you want the element to span, you can set a padding and negative margin on the element like so:
padding: 0 10px;
margin: 0 -10px;
See the above as an update to your jsbin: http://jsbin.com/amuxev
If you dont need the margin in body you can use:
Body{margin:0;}