CODEWITHSUNDEEP
htmlcss
Abijeet Patro
Abijeet Patro

Reputation: 2884

Setting the height of the body to be more than the height of an absolute div

I have an absolute div as the main content area on my page design. I have another div that occupies the top portion and which is 450px in height. I cannot know the height of absolute div before page load, so will only be able to find it out after page load has happened.

Now the problem is that my body also occupies 450px (height), so if I want to display something after the absolute div has ended I am unable to do so.

Summary :

Absolute Div : 600px (for example, don't know the actual height) Has position:absolute.
Top Div : 450px (No position:absolute)
Body Becomes 450 px as expected

How do I place a div below the absolute div. Currently the only thing I can think of is jQuery.

Here is a jsfiddle I made to the illustrate the problem. Even though the whole body displays blue, if you fire up the developer tool and inspect, you'll see that the html and body both occupy

Body Height is less

UPDATE : Linky I'm trying to display the main content area above a few elements. Those circles that you see are seperate elements. And they need to stay that way.

Upvotes: 1

Views: 165

Answers (1)

Xaimaran
Xaimaran

Reputation: 413

I think you need to learn more about the positions! Anyhow the current problem you are referring to will be solve if you change the position to relative!

<div id="First Div" style="height:100px;width:50px;position:relative;background-color:green;">
</div>
<div id="BelowDiv" style="height:100px;width:50px;position:relative;background-color:pink;">
</div>

But if you really need to place it somewhere static or in another word "absolute", then you need to place a container div and set the position to absolute, then place the other two or even more or inside the container Div.

<div id="container" style="position:absolute; top:y; left:x">
     <div id="FirstDiv" style="position:relative;></div>
     <div id="SecondDiv" style="position:relative;></div>
</div>

You can use jquery to append tags to your container. here is the sample link to do it!

If it didn't help try the height:auto and also overflow:visible for your container!

Upvotes: 1

Related Questions