CSS Postioning Question

Create a container called #nav, then create classes .box1 and .box2 in that id. The only attributes #nav should have are containing elements (width, padding, margin...)

hmmm.  Can't seem to get it to work.  would the style container be #nav .box1 {....}  or #nav>.box1 {...}

Yes divs are being used

I have a class called contentBox thats position is relative and has a z-index greater than the nav box.  I use this class for each content box created.  Actually,  a main content box, and a footer box (e.g. like the one at the bottom of the page). like this.

.contentBox {
   position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
   width:auto;
   margin: 0 0 20px 170px;
   border:1px solid black;
   background-color:white;
   padding:0px;
   z-index:3;
}

To be completely honest, I got this class from bluerobot.com  I am still new to using CSS for postioning elements.  Only used it in the past for colors and padding.  The way I learn is from example, then reading the specs.  I also have picked up a couple of books in the past couple of days, and I am just scratching the surface.

Your example is what I eventually did.  I was reading into things way to much.  If you know of a better way to achieve this.  I am all ears and eyes .  I really do appreciate all the feedback and help I get from here.  Being that Web Auth/dev is a hobby for me, I can't afford to take any formal education on this subject.  Having a wife and kids adds to the time constraints.  Its a simple two-column layout with navigation boxes on the left and content on the right.  The resources I found on the web helped some, but I wanted to come up with my own "look-and-feel".

Thanks again!

If absolute positioning is doing the job thats fine. The other way was using floats. One tip. If you trek around most of the css geek sites and the examples held up as good design they all have one thing in common, they are all fixed width. CSS fixed width layouts are dramatically easier than fluid width layouts.

A good example of a two column layout that can be adapted to any look you like is here
http://www.projectseven.com/tutorials/c … /index.htm
You even get the sample files to download.

have a look at http://dragonfighter.gary13579.info/cms.php floats, 3 columns, header, footer works fine in firefox and ie

I second Paul's suggestion of using floats.  There's also no need for an extra div (though I'd probably use one for simplicity).  Anyhoo, I whipped up a quickie version of the basic layout you are talking about.   You will notice that both of the nav divs are given float: left, and the bottom one is given clear: left as well.  That forces it to fall under the first one.  You'll also see that the first nav div gets a 20px bottom margin like you mentioned.

The difference in the way they line up is because Gecko calculates the top margin of box1 from the top of main not the top of the screen. I had that problem with profile and admin. The way around it is to put a wrapper div around the whole lot and give that a top margin instead.

For you next exercise buzzkill put main before the floats in the markup and give the left column a full height background colour.

First thing, this seems to be a hot topic   Just like anything in life there is more than one way to skin a cat.

roo:  I take what makes navbox2 drop below navbox1 is the clear: left; property.  Thanks for the very simple example.  The engineer in me wanted to make things a lot harder than they needed to be.

I am all over it

I like the idea of the wrapper because I am finding it easier to add other elements into the page and still keep scale.  Although I still have found I needed to work around IE...  like italic text breaking a float.  Whats up with that.