Menu
I have very strange "issue", on most browsers (ie, ff, chrome, safari). Here is example code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html{
outline: 1px #0ff solid;
background: rgba(0,255,255,0.1);
}
body{
margin: 0;
padding: 0;
outline: 1px #00f solid;
background: rgba(0,0,255,0.1);
}
#aDiv{
width: 300px;
outline: 1px #f00 solid;
background: rgba(255,0,0,0.2);
}
#bDiv{
margin-top: 100%;
outline: 1px #0f0 solid;
background: rgba(0,255,0,0.1);
}
</style>
</head>
<body>
<div id="aDiv">
<div id="bDiv">
content
</div>
</div>
</body>
</html>
When You change #aDiv width, then #bDiv margin-top will change with same value. I dont know how it is possible, that height goes to width. Anyway maybe one of You could explain me whats going on?
Best regards ;)
D.
778
margin-top The margin-top CSS property sets the margin area on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer. This property has no effect on non- replaced inline elements, such as <span> or <code>.
Only vertical (top and bottom) margins! In the example above, the <p class="a"> element has a top and bottom margin of 30px. The <p class="b"> element has a top and bottom margin of 20px.
Note: Negative values are allowed. yes, see individual properties. Read about animatable Try it The numbers in the table specify the first browser version that fully supports the property. Specifies a fixed top margin in px, pt, cm, etc. Default value is 0px.
Its value can be positive, zero, or negative. The size of the margin as a fixed value. The size of the margin as a percentage, relative to the width of the containing block. The browser selects a suitable value to use.
This is actually according to the spec
<percentage> The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.
Pretty useless, right? Have you considered using position: absolute and bottom: 0? They might be more of what you're looking for.
92
You could try viewport relative units ( 1vw = 1% of viewport width, 1vh = 1% of viewport height).
Tried margin-top: 90vh; ?
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
