container with floats appears to be too long

freelanceinaz

My problem page is at
http://girlschorus.org/test.html

I have a container with a relatively positioned graphic at the top, then two floats which are relatively positioned (for a a two-column effect) under the graphic. I've applied the Clear Fix hack so that the container extends to the bottom of the floats just fine.

My problem is that in moving the two floats up (position:relative; top:<something around 100px>;) in order to cover part of the top graphic, I leave a large blank space at the bottom of the container where the floats would normally be if top=0px.

I want to get rid of that space so that the bottom of the container appears just below the bottom of the floats.

Any suggestions?

Jan 15 '07 #1

drhowarddrfine

Whenever you relatively positioned an element, the space the element would normally occupied continues to be reserved for it and no other elements will occupy that space. I'm not sure you need relative positioning at all but don't have time to look at this right now.

Jan 15 '07 #2

freelanceinaz

Yes, I understand that the space will be reserved. I've tried to figure out a way to achieve the overlapping graphics without having to move the floats UP. Maybe move the top graphic down (but that leaves the space at the top instead). Or absolutely position the top graphic (tried and couldn't get the z-index to work such that the floats were in front of the graphic). Or nest another container and put the top graphic in the background and push the floats down instead (oooo, I haven't tried that one).

Is it possible that I can remove the "position:<-->" part of the rule altogether? I thought I had to position the element in order to be able to move the element upwards and have just gotten into the habit of positioning all block elements.

I'll give no positioning a try.

Jan 15 '07 #3

freelanceinaz

Excellent. The suggestion that I may not need to position at all, while it didn't work, it did lead to an improvement.

If I don't position, I can't layer the graphic and the float. But, I did change the "top:<->" parameter to "margin-top:<->" and that moved the whole thing up including the bottom of the container.

Now, just a little bit of space remains. I have an element under the floats that that contains the rounded corner. I would rather it be just behind the floats so that the container appears to end at the bottom of the floats.

Thanks! And check it out and see what I mean.

Jan 15 '07 #4