Lock the width of a column with transparent GIFs

Posted by Jeff Rasmussen. Last updated: Fri, Oct 11, 2013

The width of a column is determined by its content as illustrated in the screenshot below.

The first column has little content whereas the second has more and therefore the second column automatically contains more space. In certain cases one may wish to lock the width of a column regardless of the content. We will know show you an example with three columns that, regardless of content, are locked to the same width.

The first step is to investigate the measurement of the set up. This is done by using the Tool bottom at the upper right corner in the editor. Chose Highlight sections and the following will appear:

The section that contains the three columns is as depicted 570 pixel in width. In order to divide the width equally among the three columns it is necessary to know the measure of the margin between each column. By clicking at Section and selecting Change settings you will see that the column space is 15 pixel.

As there is three columns with two column spaces, there is a total of 30 pixel margin that is to be divided from the 580 pixel that the columns have in total. This leaves 550 pixel width distribution among the columns. Thus 550 / 3 = 183.33, i.e. 183 pixel. In this example each column has to be 183 pixel in width.

In order to lock the width on a column three transparant picture files (GIF) on 183 width and 1 pixel in height, with the same white color as the background. The enables that the pictures can not be seen be the subscribers but their width locks the width of the column,

In this way the width is locked and the amount of the content can differentiate.

Should it instead be two columns with a fixed width the calculation is instead the width of the section minus the margin between the two columns: 580 - 15 =  565. 565 / 2 = 282,5, i.e. 282.

The two pictures should instead be 282 pixel in width so the following lay out appears:

What next?

Read more articles on these subjects: Newsletter, Template, Editor


See other articles with these keywords:


See this article in:

About the author

Jeff Rasmussen
Communications Officer

Adept at strategic communication, especially external. Handles the Ubivox LinkedIn profile and marketing campaigns.

Further questions

Do not hesitate to contact us if you have any questions.

Start livechat
Write e-mail

Get in touch if you want to try Ubivox -
send us an e-mail at support@ubivox.com.