I don't know why positioning (absolute and relative) have this effect on a div.
In the illustration below I show the two cases:
The inner div shortens when its position is absolute, why?
Thanks in advance
//mod edit: image link fixed ~gt
I am improving a content management system which I have designed over the years so that the "edit section" buttons on the various sections of the site are less obtrusive.
only block level elements (divs) are going to be editable, and the way it works the eidtor pops up in a second window and makes live changes to the content in the main page.
If I had a "div" and If position it to center of the page using relative property
and the page contain a sticky footer(copy from google fetch result)
On reducing the height of the browser the footer overlap the "div" the same does not occur if I don't position the div to center of the page
Here the code
<div class="login-wrapper grid_8 prefix_4 suffix_4"> <div class="login"> <div class="header"> <h2>Sign in</h2> </div> <div class="form-content">
I've got an example here: http://jsfiddle.net/gz6Dv/5/
This is a setup for a product listing within a table. I wish to move the with id="item_Tbl" relative in position to the id="tablerelative" so it's positioned either above or below this span.
I have used relative positioning to move different text portions to specific positions on the page, this includes moving them to the left and up on the page. This hasnt effected the right to left flow of the page. However when you use relative positioning the space the element would have been in if you had not moved it is still there yes? and so there is alot of space below my page which makes the scroll bar appear and is unneeded.
Is there a different way to move the text up on the page without using relative positioning so it will not create this extra space below my page?