Keeping a div ~50px away from a div above

[stefan1294]

Again, I have a question where I couldn't find the answer of. I think the title explains itself. How will I be able to keep those two borders 50px away from eachother, as my border (#border) increases it's height when needed, automatically. Here is the soruce. The footer has to be ~50px away from the border

 #border{font-family: Maiandra GD;top: 500px;left: 390px;width:655px;word-wrap: break-word;min-height: 20px;overflow: visible;padding: 10px;border-radius: 15px;border-style: solid;border-width: 1px;border-color: #D0D0D0;position:absolute;margin:-50px auto auto -100px; } #footer{font-family: Maiandra GD;top: 700px;left: 390px;width:675px;height:20px;border-radius: 15px;border-style: solid;border-width: 1px;border-color: #D0D0D0;position:absolute;margin:-50px auto auto -100px;}

[ShadowMage]

Well, you're using absolute positioning so it isn't going to be easy if even possible without using JavaScript. My recommendation is to ditch the absolute positioning and use standard positioning techniques like margins, float and display. Then you can apply a margin-top of 50px to the footer and it will keep everything 50px above it.

[stefan1294]

Well, you're using absolute positioning so it isn't going to be easy if even possible without using JavaScript. My recommendation is to ditch the absolute positioning and use standard positioning techniques like margins, float and display. Then you can apply a margin-top of 50px to the footer and it will keep everything 50px above it.

Unfortunately I am not known with your method. Do you know any tutorial about this technique, or could you give me an explanation of how to position borders on your way?

[ShadowMage]

Just let the page build itself. HTML has a natural flow that the elements will follow. In general, elements fill the page top to bottom, left to right. An element's display type will affect how it fills in the page. This page and this page should give you a pretty good idea of how the display types behave.Once you understand how elements are placed and how the different display types behave, you can adjust margins and the display type to move elements around. Float is another, slightly more advanced, technique used to place elements. It takes elements out of the natural flow, but they do stay in the flow because they affect the position of elements around them. Absolute and fixed positioning completely remove elements from the flow and should be reserved for special cases where this is necessary.