CSS & DIV relative alignment

[Kevin P Smith]

HI,

Im kinda new to using DIVs for structuring my website (previously used the ancient and static prehistoric method of tables!).
It all seems pretty straight forwards but I have come across an issue with 'relative' positioning.

How do you make DIV alignment 'relative' to the other divs around it?
By that I mean if I have a DIV(a) that is top/left 0 and has a height of say 50px, and I want another
DIV(b) below it, which is 30px high.
I can set the top of DIV(b) as 50px but if the height of DIV(a) changes then DIV(b) will be wrong. How do I
say that I always want DIV(b)s top to be relative to the height of DIV(a)?

Here is a simple example of a DIV layout that gives me a 'header,'topnav','left nav','body' and a 'footer'.
If I changes the height of 'header' how could I move the top of 'leftnav' and 'topnav' without having to go
thoruhg the CSS and physically make the changes. Also I always want 'body' to be relative to ALL the other DIVs so that it is always inside the topnav, leftnav & foot space.

#banner {position: fixed; top:0; left:0; height: 50px; width:100%; background-color:#0f173c; z-index:0;}
#topnav	{position: fixed; top:50px; height:30px; left:150; width:100%; background-color:#fff000; z-index:0;}
#leftnav{position: fixed; top:50px; height:100%; left:0; width:150px; background-color:#66bc19; z-index:0;}
#footer {position: fixed; bottom:0; left:0; height: 15; width:100%; background-color:#e8e8e8; z-index:0;}
#content{position: fixed; top:80; left:150; height: 100%; width:100%; background-color:#000000; z-index:0;}

As my website gets more complex this would become more and more of an issue.

Cheers in advance

===============================================================================

OK, getting a bit closer (I think)

#body {font-family: verdana; color: #ffffff; margin:0px;}
#banner {position: float; top:0px; left:0px; height: 90px; width:100%; background-color:#0f173c;}
#topnav	{position: relative; top:0px; height:30px; left:0; width:100%; background-color:#fff000;}
#leftnav{position: relative; top:0px; height:100%; left:0; width:150px; background-color:#66bc19;}
#content{position: relative; top:0px; left:relative; height:100%; width:100%; background-color:#ff00ff;}
#footer {position: fixed; bottom:0px; left:0px; height:15px; width:100%; background-color:#e8e8e8;}

But the problem I have here is that the leftnav is longer than the browser window size and the content div is below the rest of the page layout.

[Bear Bibeault]

Please do not post the same question more than once. As you have re-posted this, I'll close this one.