Get The Height Of Top Div And Place That Value As A Top Padding Of Another DIV

I am using header div as a fixed header but the height of that div will change on regular basis because the matter comes dynamically. Now the next div which is just below to it was

Solution 1:

This would be the jQuery answer I think. More detail would be helpful though.

$("#header").resize(function() {
  $("#otherdiv").css("padding", somevalue);
});

Solution 2:

I would advice (if possible) to create a parent div that contains both the header div and the content div. Optionally, on either div set as css-style clear: both;. This way the vertical position of the content div will be relative to the header div.

<div id="parent">
    <div id="header" style="clear: both"></div>
    <div id="content"></div>
</div>

Solution 3:

Two things I can think of, as I was contemplating this same issue recently:

I think the most direct answer you're looking for is {element}.offsetHeight. From what I played with in FireFox (unsure about other browsers) this seems to be the height of the element. You might include a few pixels to this when placing your other div to allow the spacing you want.

However, if you place the divs one after another (siblings) and they're not set as floating, changing the upper div should move the lower div as its contents change.

Solution 4:

for the html of TheStijns answer (with header css set to position:absolute) you can use following code:

window.setInterval(function(){
  var header = document.getElementById('header');
  var content = document.getElementById('content');
  content.style.paddingTop = header.offsetHeight + 'px';
}, 100);

the event driven jquery solution makes more sense though.

for the simple case you described it shouldn't be necessary though to use javascript. html with a bit of css should work.