Div on top of another - z-index?

programming web dev
1

Hi

I have 2 divs… DIV #wave is set to 100% width… DIV #wavewhite is set to 980px width with auto margins either side… therefore DIV #wavewhite appears centered inside DIV #wave.

[COLOR=#000080]<div id=[COLOR=#0000ff]"wave"[/COLOR]>[/COLOR]
[COLOR=#000080]<div id=[COLOR=#0000ff]"wavewhite"[/COLOR]>[/COLOR] [COLOR=#000080]</div>[/COLOR]
[COLOR=#000080]</div>[/COLOR] 



    #wave {
    height:17px;
    width:100%;
    background:url(images/wave.png);    
}

#wavewhite {
    width:980px;
    height:17px;
    margin-left:auto;
    margin-right:auto;
    background-color:#fff;
}

Please see link to image below to understand what I am trying to do :
[URL="<img src=’/uploads/kirupa/6495/40db23663a96504f.png’>"]

DIV #wave has a repeated background image - wave.png, DIV #wavewhite has a white background color. I want DIV #wavewhite to be below DIV #wave. So that the blue waves are on top of the white background of DIV #wavewhite.

Any suggestions would be much appreciated!!!

Nic