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.

What am I doing wrong and how do I correct this? Thx. John

You are probably not using a float:left attribute in both to keep them stacking horizontally, but I'd need a sample page to be sure.

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?

I need to see it in a browser. Most of the settings you would have to change would be in the CSS not the html. Do you have a url I can look at?

Hi, Ray. I'm back at this project again. I'm sorry I don't have a URL to provide. i have it running on a local development server. Attached is the css file. Hope this is of some help.

I'll need to see it in a browser. Can you upload it to a server temporarily for me to look at?

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!

Your page has:
<link href="file:///C|/xampp/htdocs/boilerplate.css" rel="stylesheet" type="text/css">
<link href="file:///C|/xampp/htdocs/FSTI.css" rel="stylesheet" type="text/css">

You need to update those to be relative to the page... probably:
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="FSTI.css" rel="stylesheet" type="text/css">

There are a lot of other parts that have the same path issue. Maybe run a find and replace to remove any references to:
"file:///C|/xampp/htdocs/"

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?

The solution is probably in the .css, but with the current issues I can't really look at it in context. Please fix the path issues so I can look at the page and then I can comment on how to fix it.