Absolute position and floating

Do you have any idea, how to style this layout without specifing exact height for "Element 1"?

Code

Element1
{
positon: relative;
width: 100%;
height: auto; /* I don't want to specify exact height */
}

Inner1
{
position: absolute;
top: xyz px;
开发者_如何学编程left: xyz px;
}

Inner2
{
position: absolute;
top: xyz px;
left: xyz px;
}

Element2
{
float: left;
width: 100%;
}

Example

+--------------------------------------------------+
|Element1                                          |
|                              +--------+          |
|     +--------+               |Inner2  |          |
|     |Inner1  |               +--------+          |
|     +--------+                                   |
|                                                  |
|                                                  |
+--------------------------------------------------+

+--------------------------------------------------+
|Element2                                          |
|                                                  |
|                                                  |
+--------------------------------------------------+

I'm sorry, i misread your question, you can't actually wrap around absolutely positioned elements because they are taken out of the normal flow and can not influence other elements.

You could probably work around this using JavaScript to get the bottom position of the absolutely positioned element and set your Element1 to that or bigger height, or you could set min-height on Element1 so it appears as it is containing the Inner elements.

you could try putting a div with clear both set on it between element 1 and element 2

<div style="clear: both;">&nbsp;</div>