I have a site with the following code:
<div id="container_all"> <div id="nav"> left nav links here </div><!-- /nav --> <div id="main"> <div id="right"> right links here </div><!-- /right --> <h2>Welcome</h2> Main text here </div><!-- /main --> </div><!-- /containerall -->
Using floats I have made this (see pic1)
The reason the "right" side bar is inside the "main" div is that it is not going to appear on every page and we are using include files for the top and bottom - Only the stuff inside "main" gets changes from page to page.
Ideally the right side bar can be added to the page whenever it is needed just by putting it into the relevant page's "Main" Div (which is what we can do right now)
The problem is that I'd like it to look like Pic2 - the content of the "main" moves out of the way even below the right side bar. As though there is a margin-bottom on the right side bar that stretches all the way down to the bottom of the container div.
I could do this by wrapping the content of the "main" div (not including the right bar) inside another div then this left and give it a width that is minus the width of the side bar. However, I'd then have to add something to the bodyid to tell it that when there is a right nav it needs to float the content wrapper div. I'd really like to avoid doing this as it causes problems for a CMS - I'd really like the right nav div to do all the work of moving the content out of its way - (as if there was a margin on the bottom) Is this actually possible? Can anyone suggest a good way of doing this?
Thanks in advance
Thanks for that link but not really what I was after.
I've decided the simplest way is just to use a class / id on the body to trigger different styles if there is an extra column.
did you want the main column text to flow all the way to the right if the right sidebar didn't exist?
yes - but in the easiest way possible
if the right div wasn't there the content of the main div flowed all the way over and if the right div was there then the content of the main div didn't wrap underneath the right div. I was trying to avoid putting an extra id / class on the body but couldn't think of a way.