CODEWITHSUNDEEP
css
nines
nines

Reputation: 521

Place one absulte positioned element below another

I have two absolute positioned elements. They need to be positioned absolutely, because they make use of left and right. The upper one also uses top, the lower one has no margin and therefor will be "connected" to the bottom of the browser windows after scrolling down. For the upper one I use min-height to maintain the style I want, while still not preventing it from growing should it be needed (because of dynamic contents or small displays). How can I make sure the lower element is always below the upper one?

I am looking for a solution working without javascript.

Upvotes: 0

Views: 697

Answers (1)

Michael Rose
Michael Rose

Reputation: 7820

I will call your two elemnts the header-div and the content-div. Try adding a wrapping div around them. Your HTML should then look like this:

<div id="wrapper">
   <div id="header">
   </div>

   <div id="header">
   </div>
</div>

Now position your wrapper absolutely using the values from your header-div:

#wrapper {
   position: absolute;
   top: yourvalue;
   left: yourvalue;
   right: yourvalue;
}

And then add some style for your header, setting the min-height:

#header {
   min-height: yourvalue;
}

Now you can use margins on the content, to position it how you want, for example if your header should have left: 350px; and your content left: 300px;, you could use

#content {
   margin-left: -50px;
}

Hope this is what you need ;)

Upvotes: 2

Related Questions