SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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).

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hi frickettz. You could add clear: both to make it work:

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

  3. #3
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by frickettz View Post
    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.

  5. #5
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,340
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by frickettz View Post
    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
    Don't be arrogant. Be kind to a koala that thinks it's a bear.

  6. #6
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks to the both of you. Learning more everyday


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •