close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

my fluid grid div tag won't resize properly

Thread began 4/08/2017 3:33 pm by jjenco101368 | Last modified 4/18/2017 3:25 pm by Ray Borduin | 603 views | 9 replies |

jjenco101368

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

Sign in to reply to this post

Ray BorduinWebAssist

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.

Sign in to reply to this post

jjenco101368

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?

Sign in to reply to this post

Ray BorduinWebAssist

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?

Sign in to reply to this post

jjenco101368

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.

Sign in to reply to this post

Ray BorduinWebAssist

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

Sign in to reply to this post

jjenco101368

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!

Sign in to reply to this post

Ray BorduinWebAssist

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/"

Sign in to reply to this post

jjenco101368

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?

Sign in to reply to this post

Ray BorduinWebAssist

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.

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...