Header with fluid background image on sides, no background in center

Question

I need a header that is width:100% and has 3 columns with background images in the 1st and 3rd column:

This solution needs to be cross-browser compatible.

• First column is a background image and is 50% width (not including width of caption)
• Second column is the caption. This has no background (transparent). It's width should not be any greater than it's contents.
• Third column is same as first column.

Using a table this takes 2 seconds: http://jsfiddle.net/aLeyS/

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td></td>
        <td>Caption</td>
        <td></td>
    </tr>

table {
    width: 100%;
}
table td:first-child, table td:last-child {
    width: 50%;
    background-image: url(http://fc01.deviantart.net/fs16/i/2007/132/9/4/BW_Striped_Background_Texture_by_Enchantedgal_Stock.jpg);
}
table td:nth-child(2) {
    padding: 0 10px;
    font-size: 30px;
}

Without a table this seems to be much trickier.

I've tried using set percentage widths on DIVs inside the parent div, but it always ends up giving the center column more width than it needs, or forcing the caption to wrap if it's not enough percentage.

Again, the center column (caption) should not have any width greater than its content, and it's background needs to be transparent (not white).

Answer 1

You can fix this by setting display:table-cell on the divs. I've updated your jsFiddle .

HTML

<div class='bg'></div>
<div class='caption'>Caption</div>
<div class='bg'></div>

CSS

div {
  display: table-cell;
}
div.bg {
  width: 50%;
  background-image: url(http://fc01.deviantart.net/fs16/i/2007/132/9/4/BW_Striped_Background_Texture_by_Enchantedgal_Stock.jpg);
}
div.caption {
  padding: 0 10px;
  font-size: 30px;
  text-transform: uppercase;
}