What is a "fluid" column in Display Suite?

Question

What is "fluid" in Display Suite? I want to create a two-column layout, with a 25% left and 75% right. Is the fluid 2-column layout what I want?

Answer 1

In Display Suite, the "fluid" refers to the templates ability to expand the column width if one (or more) columns are empty.

For a 2 column layout, the CSS is:

.ds-2col > .group-left {
  float: left; /* LTR */
  width: 50%;
}

.ds-2col > .group-right {
  float: left; /* LTR */
  width: 50%;
}

So even if there is no content in .group-right, the .group-left element will still take up only 50% of the available width.

For the fluid 2col layout, the CSS is:

.ds-2col-fluid > .group-left {
  float: left; /* LTR */
  width: 50%;
}

.ds-2col-fluid > .group-right {
  float: right; /* LTR */
  width: 50%;
}

.ds-2col-fluid.group-one-column > .group-left,
.ds-2col-fluid.group-one-column > .group-right {
  width: 100%;
  float: none;
}

The last ruleset (the one with '.group-one-column') means that if either of the columns contains no content then the other column will expand to 100% of the available width. You can see the little piece of PHP logic that adds the extra CSS class to the template here: http://drupalcode.org/project/ds.git/blob/refs/heads/7.x-2.x:/layouts/ds_2col_fluid/ds-2col-fluid.tpl.php

For your case, either is fine, but to get the 25% / 75% split, you'll need to override the DS CSS code in your own theme's stylesheet.

You could use something like

body .ds-2col .group-left {
    width: 25%;
}  
body .ds-2col .group-right {
    width: 75%;
}

Answer 2

The fluid word is used to refer to an element that will expand to fit the available area which means in this case that you'll have two columns with 50% width each one if both were filled or one column with 100% width if just one was filled.

To achieve your goal using a brand new Display Suite layout you will need to implement a custom display suite layout in your theme.

Here goes a link to the Display Suite documentation page that covers this subject:

https://drupal.org/node/1098068

Answer 3

Atually, to get rid of any CSS coding, a fast way is to use "Three columns fluid - 25/50/25", and then place content only in "Left" and "Middle" columns.

By leaving no content in the right column, it will collapse and the middle column will enlarge from 50 to 75%, as requested.