I'm used to coding with tables but I'm trying to learn to code tableless as it's becoming the new standard... Anyway...

I've gotten a design on my hands that I need to finish coding ASAP as they're waiting for it. So a fast response would be great!

I have a situation where the designer made a fixed width template and it has to be centered but 1 side of the header is a different color than the other side...

So I need a way to make a certain background image repeat 100% on the left and another one to repeat 100% on the right meanwhile keeping in mind that the center box is fixed width...

How would I go about doing this? Tableless Valid XHTML/CSS...
I attached an image with the basic structure to show ya what I mean...

-Thanks


----------------------------------

#header-left {
     float:  left;
     width:  200px; /* replace as appropriate */
     background-color:  #CC0000; /* also replace as appropriate */
     color:  inherit; /* you get the idea */
}
#header-right {
     float:  right;
     width:  580px; /* replace as appropriate */
     background-color:  #0000CC; /* also replace as appropriate */
     color:  inherit; /* you get the idea */
}
.clearing {
    clear:  both;
}

Then, for your HTML ....

<div id="header-left">...</div>
<div id="header-right">...</div>
<div class="clearing">...</div>

Basically, you just need to define two divs with different background colours (or images if you prefer.)

Originally Posted by ADAM Web Design

#header-left {
     float:  left;
     width:  200px; /* replace as appropriate */
     background-color:  #CC0000; /* also replace as appropriate */
     color:  inherit; /* you get the idea */
}
#header-right {
     float:  right;
     width:  580px; /* replace as appropriate */
     background-color:  #0000CC; /* also replace as appropriate */
     color:  inherit; /* you get the idea */
}
.clearing {
    clear:  both;
}

Then, for your HTML ....

<div id="header-left">...</div>
<div id="header-right">...</div>
<div class="clearing">...</div>

Basically, you just need to define two divs with different background colours (or images if you prefer.)

I tried that and I just get the center div being displayed below the other 2...

What center div? You have a logo and a right side navigation div.

On second thought, throw your code up somewhere. It might make more sense then.

Originally Posted by ADAM Web Design

What center div? You have a logo and a right side navigation div.

On second thought, throw your code up somewhere. It might make more sense then.

After a little trial and error I finally managed to get it.

            <div id="header">
                <div id="header-left">
                    Left
                </div>
                <div id="header-right">
                    Right
                </div>
                <div id="header-center">
                    Center                
                </div>
            </div>

    #header-left
    {
        height: 67px;
        width: 45%;
        background-image: url(images/head_left.gif);
        background-repeat: repeat-x;
        float: left;
        margin: 0;
        padding: 0;
    }
    #header-center
    {
        height: 67px;
        width: 759px;
        margin: 0;
        padding: 0;
        z-index: 1;
    }
    #header-right
    {
        height: 67px;
        width: 45%;
        background-image: url(images/head_right.gif);
        background-repeat: repeat-x;
        float: right;
        margin: 0;
        padding: 0;
    }

Thanks again!

No offense, but why go thru all that ?? Use the ENTIRE bi-color header has a background for the header div, then float the logo and the menu where you want them ??

Originally Posted by LadynRed

No offense, but why go thru all that ?? Use the ENTIRE bi-color header has a background for the header div, then float the logo and the menu where you want them ??

Ok, well I ended up getting stuck on the tableless html and this guy does not care if it's tableless or not so I went back to using tables but I still cannot figure out how I can make it repeat properly on the header/footer...

--Link Removed--

(Open it in FF2 and you can see basically how it's supposed to be... But it won't work in anything else...)

I have not coded in awhile and don't know much about css so please be specific and show me an example as I'm more of a visual learner.

-Thanks

------------
Edit: Figured it out using tables, thanks anyway!