I am in need of a header that spans the entire width and is divided into 3 columns, with background images only in the 1st and 3rd columns.
Cross-browser compatibility is crucial for this solution.
- The first column should have a background image and be 50% width (excluding the caption)
- The second column is where the caption goes. It should have no background and its width should not exceed the content within it.
- The third column is identical to the first one.
It takes just 2 seconds to achieve this using a table: 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;
}
Attempting to achieve this layout without using a table seems more complex.
I have experimented with setting percentage widths on DIVs inside the parent div, but I always encounter issues such as the center column being too wide or causing the caption to wrap prematurely if the percentage is incorrect.
Once again, it is important that the center column (caption) does not surpass the width of its content, and that its background remains transparent rather than white.