Dismiss Notice
Join Physics Forums Today!
The friendliest, high quality science and math community on the planet! Everyone who loves science is here!

CSS Float Vertically?

  1. May 20, 2010 #1
    (ARG, wrong forum! ... is there no way for me to delete or move my post?)

    So, I've got a <table> full of <td>'s. And I want to have a <div> magically pop in sometimes, centered above a particular <td>. That is, I want it to partially COVER the content within the <td>. As is, I'm creating the <td>'s and <div>'s, but I just set the visibility to "hidden" until it's ready to appear. Plus, the <div>'s aren't fully opaque, so you can still see what's underneath.

    Anyway, the problem: I can get the <div> to center horizontally-- but not vertically. And unfortunately, the <td>'s can be very different size-wise. Sometimes 50 pixels tall, sometimes 200 pixels tall (depends on the image that's inside it).

    So, right now, I've got the div set to:

    Code (Text):
    .addedtag {
        position: relative;
        top: 20px;
        background-color: #DDDDFF;
        font-color: #008000;
        border: 2px solid #904040;
        width: 50%;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 5px;
        padding-bottom: 5px;
        margin-left: auto;
        margin-right: auto;
    That puts it about 20 pixels down from the top of the <TD>, but sometimes that looks woefully pathetic. And setting top to a percentage doesn't seem to do ... anything. I was hoping that setting "top: 50%" would set it to 50% of the height of the containing element (a <td>), but apparently not!

    Now, I know there's phenomenally complex ways to do this by getting the height of the <td> in javascript, and then referencing that in order to set the "top" to a certain fixed number of pixels. ... But, I was hoping (please?) that there's a better way to do this?

  2. jcsd
Know someone interested in this topic? Share this thread via Reddit, Google+, Twitter, or Facebook

Can you offer guidance or do you also need help?
Draft saved Draft deleted

Similar Discussions: CSS Float Vertically?
  1. I can't float (Replies: 16)

  2. Pong in vertical 3d (Replies: 11)

  3. What floats your boat? (Replies: 44)