WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Two adjacent table cells, how to make background colors line up at bottom (4 posts)

  1. David Borrink
    Member
    Posted 5 years ago #

    I have two blocks of text placed side by side in two table cells (using custom posts as news blocks). My style has background color running behind the text. One block has shorter text, so the background only goes down to the text. I'm using rounded corner images at the end of the post. So background colors inside the table cells won't work. The corner images don't go all the way to the bottom in the post which is shorter.

    I'd like the bottom of both blocks to be the same, so I'd like to add some code to force the block to fill the table cell and match the length of the other cell.

    Any ideas how I can make this work? I've tried <br /> and <clear> tags, height: 100%, anything, but no luck.

    See the situation at this link.

  2. stvwlf
    Member
    Posted 5 years ago #

    Hi

    Take your rounded bottoms out of the DIV and TD and put them in a new <tr><td> - bring the uppper background down to the bottom of the TD its in - then both cells will be the same height - add the rounded bottoms in a new table row

  3. David Borrink
    Member
    Posted 5 years ago #

    Hey, great idea. Another table row. Then I can fill the whole content cells with a background color which aren't affected by content length. I'll try it.

  4. David Borrink
    Member
    Posted 5 years ago #

    It worked. Thanks!

    Solution:

    First row of table has three cells. Second cell is the fixed gap (24px) between the first and third cells which have 1) a div for the top rounded corner graphics, and 2) a div for the content with custom category callups. Background color is written on the template, not the CSS. The content div uses padding for content margins. Color fills the whole cell. The longer of the two posts determines the length.

    Second row of table has three cells. Same setup as above, but the first and third cells have identical single divs for the bottom corner graphics.

Topic Closed

This topic has been closed to new replies.

About this Topic