Jump to content

Keeping a div ~50px away from a div above


stefan1294
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...