Div box breaks when it gets too close to the other div?

[frickettz]

Stumped. At this point I'm open to recoding this part from the ground up. I've tried everything I can think of and asked for help in coding forums to no avail.

I'm coding this design for a friend: http://loft14test.com/test/

My problem area is the box with the upward pointing arrow underneath the 'Connect With Us' tab. I want to bring that up closer so the upward pointing arrow nestles inside the larger one a bit but when I decrease the margin of that container it breaks everything. Try changing #dropdown_container from margin:30px auto; to margin:10px auto;

I've narrowed the problem down to my .linkboxSelected class, but I'm still not sure why it breaks the lower box (it doesn't look like it extends far enough down to touch/break the lower box).

[ralph.m]

Hi frickettz. You could add clear: both to make it work:

#dropdown_container {
  width: 1170px;
  height: 200px;
  margin: 10px auto;
  clear: both;
}

[frickettz]

Thank you so much Ralph! I've been grinding over that problem for 2 days. I've tried clear:all a couple times but I must have been putting it in the wrong spot.

Still confused why the box doesn't snug right up next to the top part when I set the margin to 0 though. No matter what I do there's always about 20-30px gap between the box and the top button area.

[ralph.m]

No matter what I do there's always about 20-30px gap between the box and the top button area.

Yes, I can't quite see why either. You could do something like

position: relative;
top: -20px

but it would be better to know why it's happening in the first place.

[TechnoBear]

I've tried clear:all a couple times ...

all is not a valid value for clear - you can use left, right or both. http://reference.sitepoint.com/css/clear

[frickettz]

Thanks to the both of you. Learning more everyday