Dreamweaver CS6 Fluid Grid layouts

Even though I don’t own Dreamweaver CS 6 yet, I’ve been studying up on how it uses fluid grids for page layout. (The dilemma of a teacher: we are often called upon to teach software we can’t afford to buy.) I found an excellent tutorial explaining it and wanted to share it here. This is an Adobe/Lynda.com video. Watch all the way to the end, there are some interesting points there.

5 thoughts on “Dreamweaver CS6 Fluid Grid layouts

  1. I have a trial ver of Dreamweaver cs6 and am working with the fluid grid layout. Everything is working fine, I can insert images and the fluid design works fine until I try to use the html5 to insert video. The video is set to width of 100% and height auto. It works fine in Chrome but is very small in IE9. Any sugestions

    • I’ve never actually had my hands on CS6, so I can’t really help. One question, though, what’s the size of the container you’re putting the video element in?

  2. It is in a Div set at 100% width in CSS
    #Content {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    background-color: #FFF;
    }
    This is for smartphone size, the width of the div is 49.9% for desktop. This video problem only happens when using this fluid layout. Any other type of layout the video works fine

    • It sounds like you’ve got something going on besides the size of the video element and the container it’s in. I’d look for inheritance issues and run it through a bunch of validation checkers.

  3. I found out what the problem was, the css has setting
    like this
    img, object, embed, video {
    max-width: 100%;
    background-color: #CCC;
    }
    The code in the HTMl does not require the width and height setting like this

Leave a Reply