my fluid grid div tag won't resize properly

my fluid grid div tag won't resize properly

Running DW CS6, when creating a fluid grid layout with 12 grid columns, I find that when i insert a new fluid grid div tag (start new line) then the div extends across all 12 columns. So far so good. However, when I create two new fluid grid div tags (both NOT start new line) and then try and resize them, they do not resize properly.

Lets say that I resize the first one to 4 columns wide, and then resize the second one to 8 columns wide, according to the tutorials they should both end up on the same line and cover the entire 12 grid columns. However, what is happening is the second 8-column wide one in fact moves down to the next row underneath the previous 4-column wide div. The only way to keep them on the same line is to reduce one of them in width by one grid column size, so only 11 grid columns are covered. This obviously is not acceptable for the layout.

Ray, attached is the template file I'm working on. I thought I had the problem solved when you mentioned the float:left idea but it didn't work. I'm trying to have my sidebar and body div tags side by side. I suppose I could just have one div and make a two-column table but I wanted to be able to put the sidebar atop the body when it got down to laying out the cellphone layout. What am I doing wrong?

Ray - The first screenshot shows what it looks like on the local development server. The second screenshot with the grid visible. When you look at it online in a browser (see private link) everything goes completely whacko!

Yes. of course. That addresses why the page looks terrible online. But the root question was why won't the sidebar and content div tags stay on the same line and cover all 12 of the grid columns. Any ideas?