Question

So basically I have a layout like this:

<div id="header">
   <div id="elementAbsolute">
   <div id="headerElement1">
   <div id="headerElement2">
</div>

<div id="content">
etc etc

My problem is that div id “elementAbsolute” can be randomly turned on or off on the page. I have no control over that. When it’s on it needs to appear underneath the header but before the content. Since it’s absolutely positioned, it just appears over the content. It does not create any vertical whitespace above or below itself obviously.

In this particular template, that element must be called where it is in the markup. It can’t be moved. Is there a way, possibly through javascript, to say that if “elementAbsolute” is turned on and exists on the page inside the “header” div then move it between the header and content div and create some whitespace?

Also keep in mind that this template is used for multiple sites, so the whitespace can only be added if “elementAbsolute” exists within “header”.

I was thinking along the lines of using the jQuery after() function to put an empty divs before and after it to create that space, but then my problem becomes I only want this function to run if “elementAbsolute” is on the page, otherwise I’ll have whitespace there no matter what.

Thanks for any help!

Answer 1

If elementAbsolute is of a fixed height then a simple fix would be to add the whitespace to the headerElement 1 or 2 instead

#elementAbsolute + #headerElement1 + #headerElement2
{
  margin-bottom: 50; /* Size of absolute element /*
}