div after a div which position is fixed in css

Question

I have made a div and I have given it position: fixed using this style sheet:

CSS

position: fixed;
top: 35px;
z-index: 9999;
height:60px;
background:#000;
width:100%;

Now what I want is: if this div has height zero, then the div which is just after should come in place of the above div. if the height of div is not zero, the next div after this div should have a margin from the above div so both div will not overlap each other.

Answer 1

When you have an element that is fixed (or absolute), there is no element after it. The fixed element is taken out of the document flow.

If you want two elements after each other at a fixed position, make a container that is fixed, and put the two elements inside it.

You can put another container with a top-margin around them, and set a top-margin on the second element. If the first element is empty, there is nothing to have a margin to, so the margin will collapse outside the container and the second element will be at the top of the container.

(The second container is needed because the margin will not collapse outside the fixed element.)

Demo: http://jsfiddle.net/Guffa/r5crS/

Answer 2

Other posters are correct in that setting position: fixed for a layout element breaks the document flow; which is sometimes intended (such as for a fixed position navigation).

Here is a jQuery snippet I've used to circumvent the problem in liquid layouts where the height of the navigation may change:

var menuHeight = $("header").height();
$("main").css("padding-top", menuHeight);
$( window ).resize(function() {
    var menuHeight = $("header").height();
    $("main").css("padding-top", menuHeight);
});

Main is the main content on my site, as the width of the page changes the padding at the top of the main content changes to the height of the header element, which mimics it being in the document flow.

Note: the code runs once at loading (for different device sizes) and on window resize (for user window resize). This could easily be neater, but it works fine for me.

Answer 3

If you could use jQuery :

$(document).ready(function() {
  var height = $("#one").height();
  if(height > 0)
  {
      $("#two").css("margin-top","10px");
  }
});

Demo