Grow your CSS skills. Land your dream job.

Another div issue

  • # November 18, 2012 at 6:37 pm

    OK, You can see on my page that I am trying to create a section in which employee bios will be housed. The first one is perfect, but the second one seems to be hanging below its container div. Any ideas?

    http://174.120.16.66/~thomasse/meet-the-team/

    # November 18, 2012 at 6:48 pm

    There are 39 opening divs and 40 closing divs. Find your extra closing div.

    # November 18, 2012 at 6:52 pm

    ok, I think I did that now. For some reason, though, #map-title is up too high now, as though it was pulled up into the previous div. It is supposed to be under that div with the bios. Also, the bios are not completely inside their container div, as you can clearly see. Been playing with opening/closing divs to no avail

    # November 18, 2012 at 7:03 pm

    1) You have multiple IDs on the same page. Change `#bio-image` and the like to `.bio-image`.

    2) You now have 39 opening divs and 42 CLOSING divs! That math does not equal up. You should be *removing* closing divs, not adding them.

    # November 18, 2012 at 7:11 pm

    so change them to classes in the html? I used the same id’s because I wanted the same behavior from those sections without coding css for each section. I looked at the div tags just now, I will not mess with them until I have a reply so as to not cause confusion. No matter what tags I remove, this is just not happening…grrr

    I posted the code directly from my editor to pastebin: http://pastebin.com/2Zji5A8m

    # November 18, 2012 at 7:21 pm

    An ID should only appear on the page **once**.

    You’d make it a lot easier on yourself if you indented your code. You could also really simplify things.

    You could just do this for markup:

    Name / Title

    555.555.5555 / email@email.com

    Content…

    Content…

    Name / Title

    555.555.5555 / email@email.com

    Content…

    Content…

    Then instead of having a useless spacer div, you can just put a top border on each of the `.bio` divs but take it away on the first child, like this:

    .bios .bio:first-child {
    border-top: none;
    }

    # November 18, 2012 at 7:23 pm

    Thank you, I see what you mean. I will look into that however as soon as I figure out how to fix this issue simply. If I change it, I will not know where I went wrong on the code I currently have. I really would like to see if it can be fixed without redoing it so I can understand what happened. Thanks

    # November 18, 2012 at 7:43 pm

    Woohoo….I fixed it. That was crazy. Thanks for your help

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".