Menu
Okay, I know that 1) this is probably not possible with CSS alone and that 2) it really shouldn't be possible.
Unfortunately, I need to find a way to make it possible due to some requirements from the user.
Okay, so some greatly simplified markup:
<html>
<head>
</head>
<body>
<div><!--There's content in here --></div>
<div id="wrapper">
<div style="position: absolute;">Stuff1</div>
<div style="position: absolute;">Stuff2</div>
<div style="position: absolute;">Stuff3</div>
<div style="position: absolute;">Stuff4</div>
</div>
<div><!--There's content in here --></div>
</body>
</html>
It's the divs within #wrapper that I need to clear. Assume they all have top&left positions.
The major obstacle here is that the divs within wrapper are movable. Not only that, but more inner divs can also be added or removed and positioned anywhere.
I was thinking that this may be possible with jQuery... Somehow finding the lowest point within that div and setting the div height to match. I'm working on doing it this way, but am not sure where to start.
Anyone have any ideas?
Solution based on Torgamus' suggested javascript
var maxHeight = 0;
$('#wrapper div').each(function () {
var tmpHeight = $(this).height() + $(this).position().top;
if (tmpHeight > maxHeight) {
maxHeight = tmpHeight;
$('#wrapper').height(maxHeight);
}
});
224
Absolutely positioned elements are positioned with respect to a containing block, which is the nearest postioned ancestor. If there is no positioned ancestor, the viewport will be the containing block. Elements with fixed positioning are fixed with respect to the viewport—the viewport is always their containing block.
An absolutely positioned element is an element whose computed position value is absolute or fixed . The top , right , bottom , and left properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative to which the element is positioned.)
The best way to do this is by using position: absolute . This will remove the element, but we won't push it off the screen. We can hide the element by setting the width and height property to zero.
Actually, it IS possible with CSS, provided you use a technique similar to the "faux absolute positioning" technique which is explained there:
http://www.alistapart.com/articles/fauxabsolutepositioning/
In your case, you could do something like that:
<html>
<head>
</head>
<body>
<div><!--There's content in here --></div>
<div class="wrapper">
<div class="container">
<div class="stuff" style="margin-left:??px, margin-top:??px;">Stuff1</div>
</div>
<div class="container">
<div class="stuff" style="margin-left:??px, margin-top:??px;">Stuff2</div>
</div>
<div class="container">
<div class="stuff" style="margin-left:??px, margin-top:??px;">Stuff3</div>
</div>
<div class="container">
<div class="stuff" style="margin-left:??px, margin-top:??px;">Stuff4</div>
</div>
</div>
<div><!--There's content in here --></div>
</body>
</html>
Using margin-top and margin-left in the exact way you would use top and left in real absolute positioning.
With the following CSS:
.wrapper {
overflow: hidden; /* To clear contents */
zoom: 1; /* To fix IE6 bugs with floats */
}
.container {
float: left;
margin-left: -100%;
position: relative;
left: 100%;
width: 100%;
}
.stuff {
float: left;
}
Sure, this would require adding extra containers around items. But you end up with something which behaves exactly like absolute positioned items would do, but clearable.
97
Probably the easiest solution would be to use jQuery to get the distance from the top of the page to the #wrapper div and the height and then position your content <div> underneath this. Something like:
$("#div").css('top', ($("#wrapper").offset().top + $("#wrapper").height()) + "px")
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
