In this fiddle, http://jsfiddle.net/munkii/tpQQN/ I have some margin bottom on the paragraph elements via the intro class and some margin bottom on the list items via the what-is class.
i.e.
article.about .what-is {
height: 100%;
margin-bottom: 34px;
padding-right: 34px;
width: 600px;
}
article.about p.intro {
font-weight: bold;
margin-bottom: 43px;
}
I have removed the unnecessary margin from my work but am still interested to know why Chrome is not collapsing the vertical margin when FF and IE does.
Any thoughts?
It can only be a bug.
According to http://www.w3.org/TR/CSS2/box.html#collapsing-margins these margins should be collapsed as we are in this case:
bottom margin of a last in-flow child and bottom margin of its parent if the parent has 'auto' computed height
.what-is' height should be computed as auto because
If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.
(http://www.w3.org/TR/CSS2/visudet.html#the-height-property)
The weirdest thing is that the computed height is indeed auto, but it seems Chrome doesn't do what it implies.
As Alex' comment states you can remove the height: 100%; rule, which lets the element takes its default height into account. auto that is.
Well said MatTheCat.
Would it be because your height is 100%, Firefox takes the height of the containing Div as the height. Where as Chrome seems to include the margin bottom on the p tag into the height of the containing Div.
If that makes any sense...
Related
I never had to use this, but sometimes it comes handy... when it works.
Whenever I write the code, sometimes happens that height: 100%; works, and sometimes doesn't.
Why this happens? I suspect I have to edit some other properties, but which?
Taken from w3c, here's their definition:
Specifies a percentage height. The percentage is calculated with
respect to the height of the generated box's containing block. If the
height of the containing block is not specified explicitly (i.e., it
depends on content height), and this element is not absolutely
positioned, the value computes to 'auto'. A percentage height on the
root element is relative to the initial containing block. Note: For
absolutely positioned elements whose containing block is based on a
block-level element, the percentage is calculated with respect to the
height of the padding box of that element. This is a change from CSS1,
where the percentage was always calculated with respect to the content
box of the parent element.
http://www.w3.org/TR/CSS2/visudet.html#propdef-height
Basically it will take 100% of the height available to it. If the element it is within has a height of 100px, then it will be 100% of 100px. Thus 100px.
If the element with height:100% has position:absolute then it will mean it takes the height of the closest parent element with position:relative or else the height of the visible window.
As pointed out in another answer. This only applies to block elements (or those with display:block applied to them).
I suspect that you observe "sometimes height: 100%; works, and sometimes doesn't" depending on the type of element? Inline elements, such as <span>, <b>, <abbr> and so on does not have height or width. See this example :
body {
height : 400px;
}
span {
height: 100%;
background-color: red;
}
div {
height: 100%;
background-color: green;
}
<span> </span>
<div> </div>
and the result -> http://jsfiddle.net/Ykca3/
even though the <span> is set to height:100%, and its parent have a fixed height, it is not rendered as with 100% height.
I want to know the real height of an element no matters what it have inside. That's easy. The problem began when I put away the borders of the element and notice an strange behavior, see it here:
http://jsfiddle.net/LypZR/
First div: 122px: OK (children height 100px, children margins 20px, border 2px)
.bordered {
border: 1px solid #000;
}
Second div: 120px: OK (children height 100px, children margins 20px)
.display-inline-block {
display: inline-block;
}
Thirth div: 100px: What? where are the margins?
I solved it using display: inline-block that works just fine for me (in this particular case). But I really want to know what is exactly happening.
I think you're getting surprised by margin collapsing.
The two cases that margins collapse are between adjacent sibling elements and between parent and child elements.
In your case, it's the parent/child collapse that's causing you grief: If you have nothing interesting between the top margin of your parent and the (top margin of its first child|bottom margin of its last child), the parent margin collapses. The transparent border hack is commonly-used in these cases.
You probably noted that it didn't change the actual layout values--the p tag's margin kept the visible elements from collapsing into each other. But I admit it's counterintuitive.
That's called the margin collapsing.
When the child element is given margin and parent element don't have any content in it, this happens.
add this class and its done.
.no-bordered{
overflow:auto;
}
Fiddle : http://jsfiddle.net/LypZR/3/
you can see real height without any collapse if you use the right css selector for all the elements *, so:
* {
height: 100px;
margin: 10px;
}
Like you did it's like a quirk behave for me because I don't know .element selector, and if you look inside the consolle could you see that no margin is applied in the styles tab, but only a computed height is calculated, perhaps for some strange behavior it isn't suppouse to work right. till I know only height width and padding are considerate for real element dimensions.
margins should not be considerate for real element dimensions, this is only an IE issue who do such calc adding margin to real element dimensions. jsfiddle
If I set the CSS margin properties of a div like so:
div { margin-left: auto; margin-right: auto; }
I get a div which is centered horizontally in the page, like so.
However, if I change the CSS to this:
div { margin-top: auto; margin-bottom: auto; }
my div is not vertically centered. I don't need to know a workaround (plenty of solutions are available) but I would like to know the reason for this behaviour. Why don't margin-top and margin-bottom work in the same way? What am I missing?
The short answer is the spec says so.
10.6.2 Inline replaced elements, block-level replaced elements in normal flow, 'inline-block' replaced elements in normal flow and floating replaced elements
If 'margin-top', or 'margin-bottom' are 'auto', their used value is 0.
http://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins
Assuming we are talking about auto margins within a Flexbox..
The reason that margin-left and margin-right set to auto will center an item is because the width by default is 100% of the available container for a block element.
The height on the other hand attempts to fill as little as the space as possible, so margin-top and margin-bottom as auto will default to 0. BUT, if your element is within an element with a fixed height, then margin-top and margin-bottom will be able to calculate the center based on that height.
Ex. http://jsfiddle.net/jwz76e3g/24/
I'm struggling with a client project. All of my divs have no absolute positioning, height:100% for html, body, and container divs, and yet the static-content stops short of its contents (at 910px).
I can change the overflow property to auto, and the background will continue down to the end of the content, but it adds a scroll bar, and the bottom border of the static-content div stays in the same place (at 910px).
UPDATE: Development link was no longer valid, so I removed it. Suffice to say that Animuson's thorough explanation is the valuable part of this thread, and solved the problem of containers not expanding to match their content. – Ty
You used the wrong overflow-y property for clearing, and you should set a min-height instead of a regular height. Try this:
#static-content {
background-color: #FFFFFF;
margin: 0 auto;
min-height: 100%; /* Set to minimum height so overflow doesn't get hidden */
overflow-y: hidden; /* HIDE overflow; I know, it doesn't make much sense */
position: relative;
width: 960px;
}
Floating Content by Itself
Given this green box which has a padding of 20px (for visibility), notice how a single red box floated to the left will expand past the boundary of its parent box. This is because floating content doesn't actually take up any "space" in the visual area. All other elements will expand underneath it, and only text will wrap around it.
Clearing Floated Content in the Parent
In order to counter this and make the green box completely encompass the area of its child red box, we can add overflow: hidden to its styles. This will expand the box down far enough.
Expanding the Parent to 100% Height
You might think that just adding height: 100% is the simplest way to make it expand to where it needs to be.However, the height property specifies an absolute height. Since the content which is floated does not actually take up any vertical space, our overflow: hidden property will cut off all the content that goes past the parent's height.
Using a Minimum Height Instead
Since we want it to expand to at least a 100% height, we can use the min-height property to force it there and still maintain the "automatic" height needed to make the parent green box fully encompass the child red box, letting it push past the 100% only when it needs too.
How You Were Set Up
All elements, by default, are set to overflow: visible so that property didn't really change anything. The only difference you had between this and the first example I provided was that you had a height: 100% set on the element. So the parent was expanding to 100% height but still not encompassing the full height of its child red box.
If you have to use overflow:visible for some reason, there's other way to force container to stretch to contain all floated content. You have to put element with clear:both as a last container's elements. If you ignore ancient IEs (<8) you can do it with very simple css (vide https://css-tricks.com/snippets/css/clear-fix/):
.your-container:after {
content: "";
display: table;
clear: both;
}
If height: 100% doesn't work well for you, you can try this calc function from CSS3:
/* Firefox */
height: -moz-calc(100%);
/* WebKit */
height: -webkit-calc(100%);
/* Standard */
height: calc(100%);
You can try this either with height, or with min-height, as already said. You can with this calc functions also other calculations like:
height: -moz-calc(100% - 50px);
And this is sometimes very useful, as you might guess.
height:100% is the height of the content that flows with your container at hand and is not taking into account your floated content, so that is why the height of your container is stopping short. Remove it and clear your container properly to clear your floated elements within and it will work:
#static-content:before, #static-content:aftr {
display:table;
content:"";
}
#static-content:after {
clear:both;
}
#static-content {
zoom:1; /*ie fix*/
}
You have a float in static-maincontent, which removes it from the regular flow of the content of the document, and hence static-content doesn't care about its height any more, and so won't expand to cover it.
Additionally, remove height:100% for static-content.
READ FOR ANSWER!!!-- Okay so I had the same problem, All that was needed was to remove the "Positioning" Style. Should work perfectly fine.
If I set the CSS margin properties of a div like so:
div { margin-left: auto; margin-right: auto; }
I get a div which is centered horizontally in the page, like so.
However, if I change the CSS to this:
div { margin-top: auto; margin-bottom: auto; }
my div is not vertically centered. I don't need to know a workaround (plenty of solutions are available) but I would like to know the reason for this behaviour. Why don't margin-top and margin-bottom work in the same way? What am I missing?
The short answer is the spec says so.
10.6.2 Inline replaced elements, block-level replaced elements in normal flow, 'inline-block' replaced elements in normal flow and floating replaced elements
If 'margin-top', or 'margin-bottom' are 'auto', their used value is 0.
http://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins
Assuming we are talking about auto margins within a Flexbox..
The reason that margin-left and margin-right set to auto will center an item is because the width by default is 100% of the available container for a block element.
The height on the other hand attempts to fill as little as the space as possible, so margin-top and margin-bottom as auto will default to 0. BUT, if your element is within an element with a fixed height, then margin-top and margin-bottom will be able to calculate the center based on that height.
Ex. http://jsfiddle.net/jwz76e3g/24/