Support » Fixing WordPress » Two adjacent table cells, how to make background colors line up at bottom

  • Resolved David Borrink

    (@davidborrink)


    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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • 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

    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.

    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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Two adjacent table cells, how to make background colors line up at bottom’ is closed to new replies.