Forum Moderators: not2easy
Is it possible to reposition a div element via CSS so that it appears underneath another div that has a varying and unknown depth?
I know I can re-position via absolute positioning, but this will lock the element into its new position. However, if the element above grows in depth there will be an overlap which will mess things up.
In the example below want to move "My Block" so that it appears under "User Block" on the displayed page yet keep it above in the code for SEO reasons.
<div>My block</div>
<div>User block [varies in height]</div>
Any ides on how to do this would be very gratefully received.
If so and you can live with some nesting, this might be a solution:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
#mine {
height: 100px;
background-color: yellow;
width: 100%;
position: absolute;
bottom: 0; /* set it on the bottom */
margin-bottom: -100px; /* equal to the height */
}
#user {
background-color: orange;
position: relative; /* gain position */
}
body {
padding-bottom: 100px; /* equal to the height */
}
</style>
</head>
<body>
<div id="user">
<div id="mine">My block</div>
User block [varies in height]
</div>
</body>
</html>
Tested in FF3, safari and opera.
Leaving testing and conditional comments for IE as an exercise for the reader ;)
How this works:
