Column Lockforce Columns Inline

Inline Edit for Custom Fields With inline editing you can update your custom field data directly from the WordPress list table. Simply add the “Custom Field” column and pick your custom field key and select a field type (e.g. Image, text) from the dropdown. There is no coding or additional configuration required with Admin Columns Pro.

  1. This isn’t my preferred technique because the column-wrapping is controlled from the XHTML markup rather than the stylesheet. The way I look at it, wrapping a list into vertical columns is a matter of presentation, not content, and therefore ought to be controlled by the stylesheet in the interests of separating content from presentation.
  2. It can be difficult to read a multi-column email on a small screen; having to scroll horizontally is kind of a pain. Reading on small displays tends to work better if it’s done in a linear fashion, from top-to-bottom. Using media queries we can switch a multi-column layout to a single-column one, making it easier to read an email.
  3. Why use Inline Editing. Admin Columns Pro allows inline editing most column content directly from its list table. Just click on an editable column and easily adjust your post data without opening each post one-by-one. Inline Editing must be enabled per column through the settings page.
Column lockforce columns inline excel

3-Column-Layout

April 12, 2010

The three-column layout is probably the second most common layout used for websites. There’s usually a header and a footer – and then some content, maybe a sidebar for navigation, a column in the middle with some content info, and another column with some additional stuff, whatever that may be. What you put inside your columns doesn’t matter – the way to achieve the 3-column layout stays the same.

So let’s start with our basic HTML to put all the parts on paper — or in our case, on line. This is the basic outline of what’s between the body tags:

For the entire HTML code – to include some filler content – see Basic HTML – No Styling. To see the code of the example page, just right-click and chose “View Source” from the drop-down. Most browsers offer that feature.

And of course what we get, is NOT a 3-column layout. It’s just one division on top of the next. That’s because we haven’t gotten to the ‘with CSS’ part of the title of this post yet. So let’s already!!

First, and just to make things easier to see, I will apply the fixed width and center my page. Here’s a post with the finer details Center-aligning a Website right here already. Here is the CSS that does that:

(Please note that you should really be using hex or rbg color codes, but for the purpose of this demonstration, color names are just easier to deal with.)

Column lockforce columns inline line

And it looks Like This. Now we just have to get our columns to act like columns and line up next to each other. There are different ways to do this, but I prefer to just float them all. So we’ll give them all a width and add float: left; to our three columns:

At this point, it’s important to be aware of a special characteristic of floats – I picture them as balloons – they float above our heads, without taking up any actual space among us. So just as you can place a box under a balloon without the two affecting each other’s space, our footer will act like the floated divisions are not even there, and line itself up neatly right under the header – where we do NOT want it to be. So we have to give the footer a special set of instructions:

and now the whole thing looks Like This. And there you have it!

A few things can go wrong, and here is some easy, preliminary damage control: If you see your columns NOT all sitting next to each other, it’s likely because the total sum of all their widths, paddings, and margins combined is GREATER THAN the width of their containing wrapper. So put one of your columns on a diet and cut its width down some – and things should fall into place beautifully. And if not, ask for help at the Killersites Community.

It can be difficult to read a multi-column email on a small screen; having to scroll horizontally is kind of a pain. Reading on small displays tends to work better if it’s done in a linear fashion, from top-to-bottom. Using media queries we can switch a multi-column layout to a single-column one, making it easier to read an email. There are two methods that will be covered here, each with its pros and cons.

Method 1 - Block-level <td> Elements

The first method uses the same column structure covered in the HTML section’s Column Layouts page. Here’s that code:

Line

The default styling for the columns isn’t really a concern here, so let’s skip straight to the media query styles:

We start off the media query stylesheet by setting the templateColumns table width to 100%, so it’ll adapt to different screen sizes or orientations. The important bit in how this layout switching works comes next: by setting each templateColumnContainer <td> to block-level elements, and reinforcing that with the 100% width declaration, the right column snaps under the left, and we have a single-column view. After that, the image gets its fluid styling and the text gets a size bump.

As we mentioned, each method has its pros and cons. This method is the most stable; by virtue of using standard, tried-and-tested coding conventions, the columns work in every client in desktop view. There are a couple of downsides, however. First is the fact that setting a <td> as a block-level element runs counter to how they’re actually supposed to be used. Second, you can’t swap the order of the columns or do any other fancy layout-shifting stuff without resorting to CSS float or position - properties that don’t enjoy wide or consistent support across email clients.

So, if your aim is stability over flexibility, this is the way to go.

Method 2 - Aligned <table> Elements

Method 2 is the opposite of the first; its strength is flexibility, but it’s not very stable. The columns are coded a little differently:

Column Lockforce Columns Inline Function

Each column <table> sits within just one <td> this time, and they each get a fixed width of 300px. The most important difference is the presence of the align attribute on each table; this attribute mimics the functionality of CSS float, but it’s actually well-supported across email clients since its HTML-spec.

Column Lockforce Columns Inline Line

In the HTML, we’ve moved the class name templateColumnContainer from the <td> elements seen in the first example to both of the aligned <table> elements that make up the left and right columns. Because each <table> is essentially floated, they automatically wrap when the media query is triggered. There’s only one change required in the media query style for templateColumnContainer; we’re now targeting a <table> instead of a <td> element:

Column Lockforce Columns Inline Excel

Setting the width of each column to 100% allows them to fill the available screen space, just as in the first example. So, what’s bad about this method? Instability. Because the columns are essentially floated, they tend to wrap under one another if there’s any layout wonkiness. You’re likely to run into this problem if the column <table> elements “touch” each other, like placing two 300px-wide columns next to each other in a 600px space. It’s all dependent on how an email client renders tables or calculates widths. Making the columns a little narrower than total width of the space they live in is sometimes a suitable work-around, but it’s not 100% fool-proof.

Column Lockforce Columns Inline Skates

In spite of those issues, the flexibility inherent to this method and how it allows for layout switching, which you can see covered in Layout Manipulation, is the best reason to use it.