Flexi CSS Layouts for Dreamweaver

Download a free trial of   Flexi CSS Layouts for Dreamweaver
Buy Flexi CSS Layouts for Dreamweaver
Download Flexi CSS Layouts trial
See video Flexi CSS Layouts
box Flexi CSS Layouts for Dreamweaver

Flexi CSS Layouts is a Dreamweaver Extension that helps you create browser compliant table-less web pages with ease. Unlike other products that are limited to templated CSS layouts with 1, 2 or 3 columns, with Flexi CSS Layouts for Dreamweaver you can build your own custom layout structure without coding.

Not only that you can create fixed, liquid or elastic layouts in seconds, but you can generate custom website sections with unlimited DIV levels, following even the most detailed mock-ups from your designer.


Special offer

Flexi CSS Layouts documentation

The Layout Properties Window

Whenever you start a new layout from scratch or you just need to change the main settings of a layout you need to use the Layout Properties interface. If you start a a new empty page or section layout, the Layout Properties interface will pop-up when opening the interface. If you are already working on a layout but need to get back to the main layout settings, you can click on the "Layout Properties" button on the upper menu of the Editor

Editor Menu
Layout editor upper menu

Understanding the Layout Properties Interface

In the Layout Properties interface you define the most important aspects of a layout: name, width, alignement, background and if the CSS should be saved in an external file or added to the <head> of the page.

Layout Properties
Layout Properties interface


  • 1 name - the name is used to identify the layout later and will be used throughout the generated DIVS; also the name is used for the files and folders the Flexi CSS Layouts creates
  • 2 width, min-width, max-width - width can be set fixed (in pixels), elastic (in em) and liquid (in %); if the layout is liquid or elastic, the min-width value prevents the layout becoming smaller than the value and the max-width doesn't let the layout to become bigger than the value in pixels
  • 3 min-height - the layout will have the height of the min-height even if there is less content to display; if you have more content to display, the layout height will increase automatically to the height of the content
  • 4 layout align - the layout can be left/center/right aligned
  • 5 background, background image - you can choose a background color for the layout; the color will cover the entire size of the display, regardless of the user resolution; if you use a background image, you need to upload it on the server and decide on the reapeat mode: repeat on X or Y axis, on both or none
  • 6 embed CSS- it's generally a best practice to embed the CSS in an external file - the Flexi CSS Layouts will create the external CSS file automatically and link it from the header; if you however need to have the CSS in the current page, it will be placed automatically between the <head> tags.

Download Flexi CSS Layouts for Dreamweaver trial
  • Adobe Dreamweaver CS3
  • Adobe Dreamweaver CS4
  • Adobe Dreamweaver CS5
  • Adobe Dreamweaver CS5.5
  • Adobe Dreamweaver CS6