How can I build this layout with CSS?

[legendandom]

Hey guys, I'm kinda noob in designing and for starters I was planning to make a layout much like this one:

Link: http://i278.photobucket.com/albums/kk108/W8ker/Layout.png

The red par of the banner should expand horizontally with the client's windows, blue parts are fixed width.

I was thinking about making an outer div to wrap the light blue part, and set the light blue part to a fixed width with auto margin for left and right. Also, I don't know if it's a good idea to not wrap everything inside one big container div, is there a problem leaving the top 2 parts (red-blue banner and dark blue header) independent of the sites content div?

Thx in advance.

 

[PixelPusher]

You have the idea right. No there is not a need to wrap everything in a container div.
To allow the red div to expand accordingly set the width to 100%.
You have the blue div correct (fixed width, set margin (L/R) to auto. Note the "auto" setting only works when there is a defined width)

To have the red/blue banner sit above the dark blue one use z-index. In order for z-index to register/function you must set the position to something other that static (default).

I would set the red div to absolute position width a z-index of say 5. (just needs to be one number higher than the dark blue div)

Set the dark blue div to relative position with a z-index of 3.

See how that works.


FYI, due to the many questions about positioning and floating, I am going to post some tutorials in the this forum for all members to reference.

 

[Advanox]

You dont need to wrap anything.
What software are you using? You can slice it in illustrator/imageready & recode it in dreamweaver. The CSS should be div's.

 

[legendandom]

To have the red/blue banner sit above the dark blue one use z-index. In order for z-index to register/function you must set the position to something other that static (default).

I would set the red div to absolute position width a z-index of say 5. (just needs to be one number higher than the dark blue div)

Set the dark blue div to relative position with a z-index of 3.

Ok, I'll try that.

What software are you using? You can slice it in illustrator/imageready & recode it in dreamweaver. The CSS should be div's.

I'm currently using Expression Web from Microsoft since it has nice support for interoperability with Visual Studio.