Adding Side Navigation to Main Content?

[ne_plus_ultra]

So. I am learning CSS with the help of many guides, pros on this forum, and useful research from w3 etc. I have one minor question which is probably easily accomplished. After several ill-fated attempts I haven't been able to add it successfully.

- How can I add side navigation to my main content?

Here is my html:
-------------------------------------------------------------------------
<div id="content">
<h2>Products</h2>
</div>
<div id="content2">
</div>


<div id="padder"></div>
</div>

<div id="footer">
-------------------------------------------------------------------------

Here is the css:
-------------------------------------------------------------------------
#content {
border-left: 16px solid #50525a;
border-right: 16px solid #50525a;
height: 42px;
background-image:url(css%20images/content_background.gif);
background-repeat:repeat-x;
padding: 10px;
overflow: hidden;
margin-top: 14px;
margin-right: 0;
margin-bottom: 14px;
margin-left: 0;
}
#content2 {
margin: 10px 0;
background-image:url(css%20images/content_background.gif);
background-repeat:repeat;
padding: 0px 27px;
overflow: hidden;
}
* html #content {
overflow: visible;
height: 1%;
}
#content h2 {
font-weight: normal;
font-size: 160%;
text-transform: uppercase;
}
#padder {
height: 70px;
}

#footer {
font-size: 80%;
font: tahoma;
color: #4F5257;
text-align: right;
padding-top: 10px;
width: 766px;
height: 70px;
margin: -70px auto 0;
background-color: #2f3137;
}
-------------------------------------------------------------------------

[Centauri]

The looks like it is still to do with the Platinum Performance page you have been working on, and which is being discussed in another thread. The above code seems to highlight why you are having another problem you mentioned before, but haven't replied back - the background images in the content areas are the reason for the gap between content areas.

However, does "side navigation" refer to the Product Categories links on the left side in the screenshot pdf you posted in the other thread? If so, I have come up with a solution to that, but was waiting clarification of the arrangement of the area immediately above this (which may be answered looking at the above code) before presenting a method.

[ne_plus_ultra]

The looks like it is still to do with the Platinum Performance page you have been working on, and which is being discussed in another thread. The above code seems to highlight why you are having another problem you mentioned before, but haven't replied back - the background images in the content areas are the reason for the gap between content areas.

However, does "side navigation" refer to the Product Categories links on the left side in the screenshot pdf you posted in the other thread? If so, I have come up with a solution to that, but was waiting clarification of the arrangement of the area immediately above this (which may be answered looking at the above code) before presenting a method.

Hi. Yes. I applied a fix to remove the gap between the two content areas. I wanted the visual elements to flow in the content area. And you are correct, the side navigation I would like to apply would contain the categories link, etc.

[Centauri]

I'm not sure why you added background images to the contents areas, and what "fix" you used to compensate for unnecessary stuff - that really affects how you implement subsequent things.

However, you seem to be looking at this is the wrong context. Rather than looking at left and right, look at logical groups. The product categories select and the welcome message and the grey bar below is a logical group, which is repeated below (with different content and graphics). Each of these logical groups can be divided left and right with floated divs.

Rather than trying to post up code (aspecially when I am not sure what you have changed), I uploaded my suggested implementation temporarily here (http://www.centauriaudio.com.au/test/ne_plus_ultra/products.html).

[ne_plus_ultra]

I am completely amazed that you were able to recreate that image into css with the exact visual style. I am going to study that -- and what you said about reviewing it in logical groups makes so much more sense. As you know I am a bit of a newbie - but a quick study nonetheless.

Also I added background images to the content areas because the style achieved in photoshop is not available in html color. The 'fix' is a shopping cart add-on I applied to align some data.

You mentioned writing a book on this - I recommend it; because there are a lot of people that learned the incorrect way. Thanks.