trouble designing with DIV's ...

hi Folks,

I've been making the great leap from using tables to DIV's for basic design layout.
However I'm having some trouble with CSS in designing a site with 2 columns
in the main page area and a bottom nav bar that is not staying at the bottom!

Two basic problems: (1) the "wrapper" div, which was supposed to "wrap" or surround
the text area composed of two columns, does not "hold" them, meaning the height of
the DIV ends before the height of the columns, instead of wrapping around them at
the bottom. The DIV height is meant to expand and contract to accomodate the amount
of text in the L and R column DIVs.

(2) my bottom nav bar, which is meant to float BELOW the wrapper, does follow below the
wrapper, but since the wrapper is not as low as it should be, the NAVBAR is also
floating up into the text.

Here's the link of the experimental page I'm working on:
http://www.goldensummersun.com/_home.htm

THANKS for any pointers you can offer ...

Gary

PS - HERE'S THE CSS OF THE DIV'S I'M USING ...

#wrapper {

width:1000px;
height:1000px;
padding:0px;
border:red 1px solid;
margin:0px auto 50px;
background-color:#E2E4F2;
z-index:0;
}

#banner {

width:1000px;
height:145px;
margin:0x auto 0px;
}

#navtop {
width:998px;
padding:4px 0px 0px;
border:1px solid #999999;
background-color:#D3A96A;
margin-bottom:0px;
position:relative;
z-index:2;
}

#navbottom {
width:998px;
padding:4px 0px 0px;
border:1px solid #999999;
background-color:#D3A96A;
margin:10px auto 20px;
position:relative;
z-index:3;

}

#column-left {
background-color:#EEEEF7;
background-image:url(../images/bkg/WB00530L.GIF);
position:relative;
width:735px;
border: 1px solid #A6A7B6;
padding:20px;
margin:5px 0px 100px 8px;
float:left;
z-index:1;

}

#column-right {
background-color:#EEEEF7;
background-image:url(../images/bkg/WB00530L.GIF);
position:relative;
float:right;
width:155px;
border:1px solid #A6A7B6;
margin:5px 8px 0px 0px;
padding:20px;
z-index:1;

}

Just at a glance...

You should always define at a minimum for each div that holds visible conent.

Height ( px, em, %, auto )
Width (px, em, %, auto )
Margin ( even if 0 )
padding ( even if 0 )

And if you use the float attribute on any div, you should clear it immediately after.

Might look at this again, if I get some time.

Add this little guy in there, and it should take care of things for you:

Code:

#wrapper:after{
  content: "";
  clear:both;
  height:0;
  width:0;
}

It'll add a pseudo element after the #wrapper that will clear your floats for you.