Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Margin-top: 100% gets parent width value... strange

Tags:

html

css

width

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.

like image 778
Artnova Art Avatar asked Oct 05 '11 12:10

Artnova Art


People also ask

What does margin top mean in CSS?

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>.

What is the top and bottom margin of the <P> element?

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.

Is there a negative value for top margin in animatable?

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.

What is the value of the margin?

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.


Video Answer


2 Answers

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.

like image 92
Ryan Kinal Avatar answered Sep 19 '22 15:09

Ryan Kinal


You could try viewport relative units ( 1vw = 1% of viewport width, 1vh = 1% of viewport height).

Tried margin-top: 90vh; ?

like image 35
cptstarling Avatar answered Sep 19 '22 15:09

cptstarling