Question

I have 3 inner divs all floating left. They are wrrapped in a parent div that is width 100%.
I have my first inner div set to a specific width then my next one is set to repeat x background and the right one sits next to that.

There is no content inside them just going to be holding background sprites.
So you have a left div, center div, and right div.
The center one will tile and the outer ones don’t. The problem I’m haing is they need a specific width or else the background doesn’t show.Is there a way for to get the center one to show. I tried width 100% percent but it did nothing. The only way I can get it to work is set the display of the parent to a table. And then the inner ones to table-cell. But this is not supported in IE7.

            <div id="subNav">
                <div class="subNav-left"></div>
                <div class="subNav-middle"></div>
                <div class="subNav-right"></div>
            </div>

Answer 1

I understand that you want to show a fluid background. The first div shows the left part of the strip, the third one the last, and the middle one repeats the background so it can be fluid. To achieve that without extra coding, just assign the repeating background to the main div, and float two inner divs, with their respective backgrounds:

<div id="subNav">
    <div class="subNav-left"></div>
    <div class="subNav-right"></div>
    <div class="clear"></div>
</div>

And the css:

<style>
#subNav{
    background: url(repeating_bk.png) top left repeat-x;
    width:100%;
}
.subNav-left{
    width: 50px; /* specified */
    height: 20px; /* specified */
    background: url(left.png) top left no-repeat;
    float:left;
}
.subNav-right{
    width: 50px; /* specified */
    height: 20px; /* specified */
    background: url(right.png) top right no-repeat;
    float:right;
}
.clear { clear:both; }
</style>

Hope it helps.