Add a "px" value to column width "%"

[Clark-AG]

When I have two stacked columns in a row that has an image background, I often want the bottom column to be narrower. For example, a big heading with a narrower paragraph underneath it. A paragraph is easier to read if it is narrower.

Two methods I have tried are adding margins on either side, and adding empty columns on either side.

Both methods have similar issues: when the screen or browser is made smaller, it immediately crowds the centre column or element inward which looks bad because to the viewer's eye there is plenty of white-space on either side. This makes for ugly design.

The most elegant solution is to add a max-width to the centre element using CSS. This keeps the element at a set width until the screen edges reach it and only then does it start to become narrower.

What I propose is to add a pixel value to the width of columns, or some other easy method of setting a max width.

Perhaps if columns begin to overlap then one of them could be set as "priority" and the other columns would become narrower regardless of their pixel width setting.

[studioavanti]

Hi,

Agreed, other units would be useful I add a case with 2 columns which required:

• Left col: 90px
• Right col: calc(100% - 90px)

[gbissland]

Agreed. Voted.