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

    1. 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

    1. 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