One of my web designs called for me to make several content objects with rounded corners fill the available space left after a fixed-width DIV with an ad in it was floated to the right. CSharpFeeds.com demonstrates the end result.
I set out to do this using just CSS, but after searching all over the Web, realized that the only way I'd be able to make it happen was through good old-fashioned tables. Assigning a percentage to a DIV (or a table for that matter) made the object take up a percentage of the entire area as if the floated object didn't exist. When 100% width was assigned, the floated object overlapped the other.
What I really wanted was a way to tell an object to take 100% of the available left-over space. A table without a width assigned turned out to be the answer. This solution feels a bit hacky, but to my knowledge is the only way possible to achieve the desired result.
I created a 9 cell table and used background images for the 4 rounded corners.
I then needed to add a border on the top and bottom of the 2 center cells on the top and bottom rows. This was simple by just styling those cells appropriately however in order to get IE to actually render the styled border, I had to add content to the cells. I chose a spacer gif, but could have easily used a non-breaking space .
In order to get the table to expand and fill the available space, I assigned a width of 100% to just the center cells. This worked great however it caused the left and right column widths that I had set to 15px to shrink to zero. So I used the same spacer gif in each cell styled to render at 15px wide to force the width of each column.
Here's the CSS:
1: .centerHeader {
2: margin-bottom: 12px;
3: padding: 0;
4: line-height: 12px;
5: }6: .centerHeader td.tc {
7: background-color: #C8E0E4;
8: height: 10px;
9: padding: 0px;
10: width: 100%;
11: }12: .centerHeader img {
13: width: 15px;
14: height: 10px;
15: }16: .centerHeaderTop td.tc {
17: background-color: #C8E0E4;
18: border: 0;
19: border-top: 1px solid #9AC9CD;
20: height: 10px;
21: padding: 0px;
22: }23: .centerHeaderTop td.tl{
24: background: #FFFFFF url(Images/CenterHeaderTopBkgd.png) no-repeat top left;
25: height: 10px;
26: width: 15px;
27: }28: .centerHeaderTop td.tr{
29: background: #FFFFFF url(Images/CenterHeaderTopBkgd.png) no-repeat top right;
30: height: 10px;
31: width: 15px;
32: }33: .centerHeaderContent td.tc {
34: background: #C8E0E4;
35: padding: 0px 10px;
36: text-align: center;
37: }38: .centerHeaderContent td.tl {
39: background: #C8E0E4;
40: border-left: solid 1px #9AC9CD;
41: width: 15px;
42: }43: .centerHeaderContent td.tr {
44: background: #C8E0E4;
45: border-right: solid 1px #9AC9CD;
46: width: 15px;
47: }48: .centerHeaderContent h1 {
49: font-size: 1.1em;
50: color: Black;
51: margin: 0;
52: line-height: 1.2em;
53: }54: .centerHeaderBottom td.tc {
55: background-color: #C8E0E4;
56: border: 0;
57: border-bottom: 1px solid #9AC9CD;
58: height: 10px;
59: padding: 0px;
60: }61: .centerHeaderBottom td.tl {
62: background: #FFFFFF url(Images/CenterHeaderBottomBkgd.png) no-repeat bottom left;
63: height: 10px;
64: width: 15px;
65: }66: .centerHeaderBottom td.tr {
67: background: #FFFFFF url(Images/CenterHeaderBottomBkgd.png) no-repeat bottom right;
68: height: 10px;
69: width: 15px;
70: }
And here's the HTML:
1: <table cellpadding="0" cellspacing="0" class="centerHeader">
2: <tr class="centerHeaderTop">
3: <td class="tl"><img src="/Images/spacer.png" alt="" /></td>
4: <td class="tc"><img src="/Images/spacer.png" alt="" /></td>
5: <td class="tr"><img src="/Images/spacer.png" alt="" /></td>
6: </tr>
7: <tr class="centerHeaderContent">
8: <td class="tl"><img src="/Images/spacer.png" alt="" /></td>
9: <td class="tc"><h1>{  My Heading  }</h1></td>
10: <td class="tr"><img src="/Images/spacer.png" alt="" /></td>
11: </tr>
12: <tr class="centerHeaderBottom">
13: <td class="tl"><img src="/Images/spacer.png" alt="" /></td>
14: <td class="tc"><img src="/Images/spacer.png" alt="" /></td>
15: <td class="tr"><img src="/Images/spacer.png" alt="" /></td>
16: </tr>
17: </table>
Yes, it may be a lot of code to display a simple heading, but is the only way that I found to do it. If you have a better method, please share it with me.