Grow your CSS skills. Land your dream job.

HTML5 and divs now showing up correctly

  • # July 9, 2012 at 4:01 pm

    I was playing around with some HTML5 code for a directory. I’m using a article section for each faculty member but for some reason, they are not showing up one under another. Can anyone help point me in the right direction.

    http://codepen.io/anon/pen/10028/1

    # July 9, 2012 at 4:08 pm

    @Maddtechwf Because you set it to inline-block on the clearfix class. If you set it to block it works. http://codepen.io/pen/10031/1

    # July 9, 2012 at 4:25 pm

    Awesome, thank you @ChristopherBurton. Would you possibly know why my 1px solid black border isn’t wrapping my items fully?

    # July 9, 2012 at 4:32 pm

    My row background isn’t showing either.

    # July 9, 2012 at 4:32 pm

    You mean separately? It seems they are wrapping all the items.

    # July 9, 2012 at 4:49 pm

    You have spelled ‘article’ incorrectly, that could be throwing some things off.

    # July 10, 2012 at 8:27 am

    @TheDoc – That’s what was throwing it off on my side. Thanks. Any ideas why my .row-a and .row-b background colors are not showing up? I know row b is white so I’m not going to see it but when I put any other color there, I don’t notice it.

    # July 10, 2012 at 1:08 pm

    No problem. It’s just a tiny error in your code. You have:
    #faculty-info .row-a { background: #e5e5e5;}
    When it should be:
    #faculty-info.row-a { background: #e5e5e5;}
    Note the space that I’ve removed. You were looking for #faculty-info with a child element called .row-a. Mine is targeting any #faculty-info with a class of .row-a.

    Speaking of IDs and classes, you should only be using an ID once per page. In your page, you’ve got a number of duplicates.

    # July 10, 2012 at 5:14 pm

    @TheDoc – I actually corrected that yesterday but forgot to update the code on the codepen. Thanks for pointing that out though. Thank you very much.

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

You must be logged in to reply to this topic.

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