3

I set a left floating div (navigation) below an absolute positioned div (header). Aside of the left floated div I have another div (article) with a margin a little bigger than the width of the floating div (just usual for a two column layout). Both, navigation and article gets a top-margin of 4em (header has height of 3em) The navigation div is positioned with an extra margin of 4em. I can solve this, but my question is: Why the extra margin. If I omit the absolute positioning of the header, it looks like I would expect: header - margin - navigation and article on one line. code: 

 * {
    box-sizing: border-box;
  }

  body { /*schalte voreinstellung Browser aus */
    margin: 0px;
    padding: 0px; 
  }
  header {
    position: absolute;
    top: 1px;
    left: 0px;
    height: 3em;
    width: 100%;
    padding: 10px;
    border: 1px solid blue;
    border-radius: 0.5em;
    background-color: silver;
  }
  nav {   
      float: left; 
      width: 17em; /*breite relativ zum Buchstaben "m" in der aktuellen Schriftgroesse */
      border: 1px dashed red; /*Rand und padding jedoch in pixel */
      margin-top: 4em;
      padding: 5px;
    }
  
  
  article {
      margin: 4em 1em 0em 18em; /* top right bottom left */
      padding: 0px 10px;
      border: 1px dashed red;
      min-width: 15em;
  }
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Layout</title>
</head>
  <body>
    <header>
      headline - position fixed w&uuml;rde sie fest halten 
    </header>
    <nav>
      <h2> Navigation </h2>
      <ul>
 <li> hier die links </li>
      </ul>
    </nav>

    <article>
      <h1>CSS-basierte Layouts</h1>
      <h2>2 Spalten</h2>
      die ziemlich leer sind
    </article>

  </body>
</html>
karo
  • 33
  • 4

1 Answers1

2

When you position the header absolutely, the rest of the layout behaves as though the header was never there.

So without considering the header, we're looking at three main layout elements: the body, the nav, and the article.

What's happening is that, because the header is now irrelevant to the rest of the layout, the article becomes the first in-flow child of the body and as a result its top margin collapses with that of the body (see Why does this CSS margin-top style not work?). This causes the body to be pushed down and the border edge of the article to be flush with the body, making it seem like the article has not been adjusted at all.

The nav, on the other hand, is floating and therefore taken out of the flow. Margins on floating elements do not collapse with their ancestors because floating elements are not in the flow. So its margin edge, not its border edge as is the case with the article, is flush with the body.

When you stop positioning the header, it remains the first in-flow child of the body. The article's top margin now collapses with the bottom margin of the header, rather than the top margin of the body. Since the header doesn't actually have any margins, and the top margins of both the nav and the article are equal, this results in the latter two being aligned with each other.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • yes, thanks, it's logic, but I don't expected that the body pushs down when margins are collapsing, but otherwise the margin would be completly omitted. Setting overflow: auto of the body should avoid this behaviour (see the link to Why does this CSS margin-top style not work?) but it doesn't. I'am overlooking another aspect? – karo Nov 03 '16 at 22:15
  • @karo: See [overflow: hidden on div and body, different behavior](http://stackoverflow.com/questions/15461967/overflow-hidden-on-div-and-body-different-behavior) – BoltClock Nov 04 '16 at 03:05