Two overlapping divs with variable height = no height on the container

Question

It is easy to make two div overlaps when the size of the div container is known, but what if the div cannot?

I tried to do this without manipulating the height of the container: http://jsfiddle.net/AJfAV/ But #text2 go to #text3 and don't “click” it. How to automatically resize #container ?

I manage to achieve my goal using jquery ui, but I think this is not an elegant solution: http://jsfiddle.net/AJfAV/6/

Answer 1

That's what you need?

Updated script:

I set the default height to auto using jQuery, for example:

 $("#container").css("height", "auto"); 

You can also set: height: auto; in CSS.

Answer 2

Do you need a position: absolute? You can use absolute positioning if you do not want to make any arrangements, but a placement. Absolute positioning completely removes the element from the stream of elements. They do not know anything about its existence.

You can use floats and technique to cover the floats. I use clear:

 .cl-left { clear: left; height: .1px; font-size: 0; line-height: 0; } 

Remember to add <div class="cl-left">&nbsp;</div> .

In addition, a negative margin is used. Therefore, # text2 is beaten to the right.

http://jsfiddle.net/AJfAV/7/

Answer 3

this can be resolved if you removed the absolute positioning #text1 and #text2 .

and make #text2 overlap #text1 , making both float:left and setting margin-left:-30px for #text2 .

now test it: http://jsfiddle.net/RPe4H/

now the problem is that when #text1 switched, #text2 will float in the upper left corner of #container , this happens because jQuery sets display:none on the element when going over.

Now, to solve this problem, put # text1 and # text2 inside containers with the same width, so #text does not affect the stream when it is set to display:none , you must also set min-height:1px to container #text1 .

now it works as expected http://jsfiddle.net/MyyF6/1/