www.webdeveloper.com
Results 1 to 6 of 6

Thread: [RESOLVED] Multiple object with different alignment in single table cells

Hybrid View

  1. #1
    Join Date
    Jan 2006
    Location
    South Africa
    Posts
    62

    resolved [RESOLVED] Multiple object with different alignment in single table cells

    Hi, everyone,

    This might be very simple but if it is, I just can't see it.

    I have a single table cell of arbitrary width and height. In that table cell I want to display an image that must be aligned with the top of the cell, with a caption below it that must be aligned with the bottom of the cell. In other words, the gap between image and caption must vary to fill up whatever space is left. Like so:

    Code:
    +----------------+
    |   +---------+    |
    |   |    img     |    |
    |   +---------+    |
    |                       |
    |                       |
    |                       |
    |      caption       |
    +----------------+

    Can this be done using CSS? If so, how? Or is it simply impossible to reliably assign different positioning to elements within the same table cell?

    All suggestions appreciated. Thanks in advance!

    // FvW

  2. #2
    Join Date
    Feb 2011
    Location
    israel
    Posts
    157
    try relative and absolute positioning.
    give the container (in your case, td?) relative positioning, rather than static.
    after you do that, you can position the elements inside it however you want, with absolute positioning.
    example:
    Code:
    div {height:300px;
        width:300px;
        border:2px solid black;
        position:relative;}
    img {position:relative;
        top:0px;
        left:opx;}
    p {position:absolute;
        bottom:0px;
        }
    look here for more info: http://stackoverflow.com/questions/1...iner-using-css

  3. #3
    Join Date
    Jan 2006
    Location
    South Africa
    Posts
    62
    Thanks. I tried that, but when I assigned absolute positioning to the caption text, it appeared positioned relatively to the page rather than to the table cell. Which confirms what is said in the page you refer to.

    Hm. I can see that I need to fiddle with this. But at least it appears to be possible, which at least helps. :-)

    // FvW

  4. #4
    Join Date
    Feb 2011
    Location
    israel
    Posts
    157
    did you set the position of the cell to "relative"?

  5. #5
    Join Date
    Jan 2006
    Location
    South Africa
    Posts
    62
    Yes I did. But no effect.

    However, I have taken the example code referred to by Moritana, and that works. So there is obviously something in my own CSS code that overrides the positioning. I am now in the process of finding out what that is, starting with the example code and working toward my own code. I am sure I will locate whatever the conflicting or overriding CSS property is.

    Thanks to you both for your assistance!

    // FvW

  6. #6
    Join Date
    Jan 2006
    Location
    South Africa
    Posts
    62
    Aha. Mystery explained, problem solved. I had not assigned a fixed height to the table cells, but I let them scale dynamically on the basis of the (varying) sizes of the images to be displayed in them. So I was trying to apply absolute positioning to objects within a cell of (at the time of rendering) variable size. Which, unsurprisingly, does not work, since there is no fixed point of reference to begin with.

    Lesson learned. :-)

    // FvW

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles