Working with Floats in Titan CMS
Northwoods’ Titan Content Management System offers clients great flexibility in the structure and design of each web page on their sites. Titan CMS users have full access to designs Northwoods has created especially for them and to basic layouts embedded in the content management system.
Above are three popular layouts.
All Titan clients can also float content. Floats work especially well with responsive designs, in which pages reconfigure to accommodate the smaller screens of hand-held devices.
Wait -- What do you mean by “floating content”?
Think of the width of your webpage as 100 percent. When you insert a block of content, it will automatically fill 100 percent of that width. However, if you assign a Float50 to that a block of content, it will occupy just 50 percent of the screen’s width. Placing two Float50’s side by side yields the obvious result:
The most typical float options:
These options open a world of possibility, because you can assign any of them to any block of content, as long as they total 100 percent.
*What?! Some of these rows add up to 99%! Well… close enough.
Obviously, a Float50 next to a Float66 won’t work. Because they lack the space to sit next to each other, Titan CMS will stack them:
How do I apply a float to my content?
In Titan CMS, you build pages within blocks. (Known as “modules” in other CMS platforms; follow the link to learn more about Titan’s many block options.) Each block dropped on a page has a Block Attributes option in the upper right corner:
The Edit Block Attributes button – it looks like a gear – sits in the upper right corner of the block.
Selecting this option opens a window like the one shown below. All the float options available for your website appear in that window. Move the desired float option to the Selected field by clicking on the green arrows in the middle of the window.
Using Floats on Real Websites
The image below shows a webpage on the left. On the right, it shows how we built that page within Titan CMS. The page layout option is Center. The four freeform content blocks on this page stack directly atop one another because we have applied no floats.
Please note that blocks appear on the website in the same order they appear within Titan CMS.
If I assign a Float50 to each block of content, my webpage looks like this:
Each block of content occupies 50 percent of the screen’s width, so the four blocks of content arrange into two rows.
Assigning a Float33 to each block of content yields this web page:
All four blocks of content do not fit in one row, as three Float33’s fill 100 percent of the width and push the last piece of content down to the second row.
Floats and Page Layouts
Floats behave differently in page layouts with right or left columns, because the floats no longer interact with the entire screen. In these layouts, the float process treats each part of the page layout as a width of 100 percent.
The two-column layout below has a Center Zone and a Right Zone. Users can add content to and float content within either zone. Added content will not exceed the boundaries of those zones and will adjust proportionally within those boundaries per the float percentage:
The next example shows how the right column affects floated content.
The four Float33 blocks of content in the Center Zone arrange as they did in the Center-only page discussed earlier, right down to the fourth block pushed to the second row. But they have adjusted in size in response to the space restriction due to the insertion of the Right Zone.
Note that the image of the three people fills the full width of the Right Zone. The Right (or Left) Zone is, in general, too narrow for content blocks to sit side by side.
Final Tip on Working with Floats
Think carefully about the amount of content floated in each block. In the examples above, each block is exactly the same size. Content blocks rarely match up so squarely in the real world. Unequal lengths affect your floats. For example:
All four blocks of content are Float50s. However, that first block has three times the content of any other block. This creates awkward white space below the second image in the top row. This problem invites users to play around with different float options. Instead of giving all four blocks a Float50, remove floats from the first block of content and apply Float33 to the remaining three:
The white space vanishes and all the content floats harmoniously.
Originally Published: Wed, August 30, 2017