Grow your CSS skills. Land your dream job.

Why is this table not aligning my content?

  • # July 29, 2012 at 7:49 pm

    As you can see, I have a live twitter feed and two icons all contained into a table so they will align (its the only way I’ve been able to do this). Why does the table add an extra 13px to the feed? There is no margin style on any of the CSS or cell padding. Thoughts?

    # July 29, 2012 at 7:49 pm

    Forgot the site! http://www.blinktankfilms.com

    # July 29, 2012 at 9:04 pm

    my first thought is – never use tables for layout…

    The reason there’s an extra 13 pixels at the top is that the images are aligned to the font baseline by default which pushes them up a little. You could set them to vertical align: bottom; or display: block; – either will work. But I’d try to redo it without the table. You should be able to float them without any trouble (and jnh will suggest inline-block ;)

    # July 29, 2012 at 9:52 pm

    how would I apply the float to my css or inline block? would I turn each individual thing into a div?

    # July 29, 2012 at 10:00 pm

    got it! thanks!

    # July 29, 2012 at 10:03 pm

    I would change this



















      to this





        and float the ul and img left with a width of 900 on the ul
        edit// you don’t really need to wrap everything in a div to float. and I see that you added a third image. The triangle really should be a background image (its not content) perhaps on the ul and the inline styling isn’t good practice – move it to the stylesheet

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

      You must be logged in to reply to this topic.

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