467,907 Members | 1,405 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,907 developers. It's quick & easy.

container with floats appears to be too long

My problem page is at

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
  • viewed: 1408
3 Replies
Expert 4TB
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
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
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

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Ney André de Mello Zunino | last post: by
8 posts views Thread by Tom | last post: by
8 posts views Thread by Madhusudan Singh | last post: by
4 posts views Thread by Gustaf | last post: by
1 post views Thread by Miked | last post: by
1 post views Thread by anish007 | last post: by
6 posts views Thread by Hendrik Maryns | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.