dynamically set CSS padding-top

Question

I may have to alter the structure of DIVs I am using for my webpage layout.

On this page, I have:

<div id="container_slider"></div>
<div id="container_content">
  <div id="main">
    <div id="header"></div>
    <div id="content"></div>
  </div>
</div>

<style>
  #container_slider {position: absolute; top: 0; z-index: 1;}
  #container_content {position: absolute: top: 0; z-index: 10;}
  #main {width: 940px; margin: 0 auto;}
  #header {width: 170px; float: left;}
  #content {width: 760px; float: right;}
</style>

I want #header to display overlaying #container_slider, but I want #content to display vertically beneath #container_slider.

The trouble I have is that the contents of #container_slider is responsive, so the height of #container_slider depends on the browser dimensions.

This means I can't set an accurate padding-top for #content.

Is there a way I can dynamically set #content's padding-top to a value = height(#slider_container) + 10 ?

Or do I need to adjust the way I construct my DIVs?

Answer 1

You can check height on document ready function by this:

var heightSlider = $('#container_slider').height();

Then apply the same as padding-top for content:

 $('#content').css({ paddingTop : heightSlider + 30 + 'px' });

Demo

Answer 2

Just an implementation of the above answer that dynamically adjusts for nav bar height.

$( document ).ready(function() {
var topHeight = $('#topNav').height();
var bottomHeight = $('#bottomNav').height();
$('body').css({ paddingTop : topHeight + 5 + 'px' });
$('body').css({ paddingBottom : bottomHeight + 5 + 'px' });
});