dynamically set CSS padding-top

Question

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

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

Richa · Accepted Answer · 2014-03-03 07:54:43Z

2

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

edited Mar 3, 2014 at 7:54

answered Mar 3, 2014 at 7:32

Richa

4,2705 gold badges36 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user1204214 · Accepted Answer · 2018-12-24 00:28:07Z

0

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' });
});

answered Dec 24, 2018 at 0:28

user1204214

851 silver badge7 bronze badges

Collectives™ on Stack Overflow

dynamically set CSS padding-top

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related