html div positions and display

Hi,

I am trying to design a web site, using 5 different divs as shown above.

• "A" is the header, ( background-image, repeat x)
• "B" is the navbar 1 ( image inside a div, should have 100% height )
• "C" is the content panel ( div, should be the only part which moves d开发者_运维问答uring page scroll)
• "D" is the footer ( div, which should be always above the "C" )
• "e" is the menu ( div, which should always stay at same position)

Can you help me about this, I tried but failed, and another issue is "B","C","D" and "e" should be in the center always when resizing the window or with different screen resolutions "x point" and y "point" should resize when resizing the window.

x point : between left wall to "B"

y point : between C and right wall

You will want to use negative margins and float: left & right

so create a div called "container" make it the width of your minimum display.

Then do something like this

I have created this page so you can see it live, its a small version but you can adjust the widths and heights as you need.

http://luistovar.com/divs.html

<center>
<div id="container">

    <div id="a"><font color="white">A</font>
        <div id="e"><font color="white">E</font></div><!-- div e end -->
    </div><!-- div a end -->

    <div id="b"><font color="white">B</font></div><!-- div b end -->

    <div id="c"><font color="white">C</font></div><!-- div c end -->

    <div style="clear:right"></div><!-- clear end -->

    <div id="d"><font color="white">D</font></div><!-- div d end -->

</div><!-- container end-->
</center>

Now for your CSS

#container {
    width:400px;
}

#a {
    width: 400px;
    height:60px;
    background-color:#333333;
}

#b {
    width:80px;
    height:100%;
    margin:-30px 0px 0px 40px;
    float:left;
    background-color:#666666;
}

#c {
    width: 250px;
    height:400px;
    margin:10px 20px 0px 0px;
    float:right;
    background-color:#999999;
}

#d {
    width: 250px;
    height:40px;
    margin:10px 20px 0px 0px;
    float:right;
    background-color:#ff0220;
}

#e {
    width: 160px;
    height:30px;
    margin:10px 20px 0px 0px;
    float:right;
    background-color:#ff0220;
}

Adjust the widths and heights as needed
I added the background colors so you can see where the divs are landing.
I haven't tested this but it should be pretty darn close.
Hope this helps

I'd say the layout detailed here is probably more or less what you're after. You'll want to check out absolute positioning I think for your "e" div, that's going to be the tricky one. And "B" will probably have to be z-indexed to display over the top of "A". I'd get it working though with just a 2 column layout as mentioned in the link, then add in "E" and the overlay on "B" later. Good, liquid layouts are tricky, so I wouldn't re-invent the wheel on this one.