Understanding Tiled and Floating Layouts in Tableau

Topic: Understanding Tiled and Floating Layouts

Course: Tableau Training

Learning Objective: Understand how tiled and floating layouts work, learn their differences, configure dashboard objects, use layout containers, manage object positioning, and build professional Tableau dashboards.

1. Introduction to Tiled and Floating Layouts

Tableau dashboards combine worksheets, charts, filters, legends, images, text, and other objects into a single visual workspace. Tiled and floating layouts determine how these objects are positioned, resized, and arranged within the dashboard.

Every view, layout container, and dashboard object uses either a tiled or floating layout. Tableau uses tiled placement by default, while floating placement provides more independent control over an object's position and size.

Choosing the appropriate layout helps create dashboards that are organized, readable, interactive, and easier to maintain.

1.1 What Is a Tiled Layout?

A tiled layout arranges dashboard objects within a structured layout. Objects share the available space, do not overlap one another, and form a grid that adjusts according to the dashboard dimensions and layout structure.

Example: A sales dashboard contains three KPI cards across the top, a line chart and a bar chart underneath, and a regional profit chart at the bottom.

1.2 What Is a Floating Layout?

A floating layout allows an object to be positioned and sized independently of the main tiled layout. Floating objects can overlap other objects and can be placed above or in front of other dashboard elements.

Example: A map occupies most of the dashboard while a floating filter panel, legend, or text label appears over an unused area of the map.

Official reference: Tableau – Size and Lay Out Your Dashboard.

2. Understanding Tiled Layouts

2.1 How Tiled Layouts Work

In a tiled dashboard, objects fit together within the available canvas. When a new object is added, Tableau places it into the layout and adjusts the arrangement to accommodate it. The precise behavior depends on the selected drop location and whether layout containers are being used.

Tiled objects generally share space rather than overlap. This makes it easier to build structured dashboards with consistent spacing and alignment.

2.2 Main Characteristics of Tiled Layouts

• Objects are arranged within a structured layout.
• Objects do not overlap one another.
• The layout adjusts as objects are added, removed, or resized.
• Objects share the available dashboard space.
• Horizontal and vertical containers help control object arrangement.
• Alignment and spacing are generally easier to maintain.
• Tiled layouts are well suited to standard business dashboards.

2.3 Example of a Tiled Layout

+--------------------------------------------------+
|           SALES PERFORMANCE DASHBOARD            |
+--------------------------------------------------+
| Total Sales | Total Profit | Total Orders         |
+--------------------------------------------------+
| Monthly Sales Trend     | Sales by Category      |
|                         |                        |
+--------------------------------------------------+
|             Profit by Region                     |
+--------------------------------------------------+
| Region Filter | Year Filter | Category Filter    |
+--------------------------------------------------+

Each object occupies a defined section of the layout. The charts and KPI cards do not overlap, making the dashboard easier to scan.

2.4 Advantages of Tiled Layouts

• Better organization: Objects follow a clear structure.
• Consistent alignment: Related visualizations can share edges and spacing.
• Easier maintenance: Adding or removing objects is generally more manageable.
• Efficient space usage: Objects can expand into available layout space.
• Suitable for teams: Structured dashboards are often easier for other developers to update.
• Responsive design support: Tiled layouts are generally a good starting point when dashboard dimensions may change.

2.5 Limitations of Tiled Layouts

• Objects cannot freely overlap one another.
• Precise positioning can be more difficult without layout containers.
• Adding a new object may change the size or position of surrounding objects.
• Some custom compositions are difficult to achieve with tiled objects alone.
• Hiding an object can affect the remaining layout, depending on its position in the layout hierarchy.

2.6 When Should You Use a Tiled Layout?

Use tiled layouts when building:

• Sales performance dashboards.
• Financial reporting dashboards.
• Marketing performance reports.
• Operations monitoring dashboards.
• Executive KPI dashboards.
• Dashboards with several charts that require consistent alignment.

3. Understanding Floating Layouts

3.1 How Floating Layouts Work

A floating object can be positioned independently on the dashboard canvas. Its location and dimensions can be adjusted without requiring it to occupy a fixed position within the tiled grid.

Floating objects can appear over tiled objects or other floating objects. When several floating objects overlap, their stacking order determines which objects appear in front.

3.2 Main Characteristics of Floating Layouts

• Objects can be positioned independently.
• Objects can have custom sizes and locations.
• Objects can overlap other dashboard elements.
• Floating objects can be layered above or below other floating objects.
• Position and size can be adjusted through the Layout pane.
• Fixed-size dashboards often make floating arrangements easier to control.

3.3 Example of a Floating Layout

+--------------------------------------------------+
|             SALES DASHBOARD                      |
|                                                  |
|   +-------------------------+                    |
|   | Monthly Sales Trend     |                    |
|   |                         |  +--------------+  |
|   |                         |  | Region Filter|  |
|   +-------------------------+  +--------------+  |
|                                                  |
|   +------------------------------------------+   |
|   | Sales by Category                        |   |
|   +------------------------------------------+   |
|                                                  |
+--------------------------------------------------+

In this conceptual example, the filter panel floats over part of the dashboard. Floating objects can be useful when the underlying chart has enough unused space to accommodate the overlay.

3.4 Advantages of Floating Layouts

• Precise positioning: Objects can be placed at specific coordinates.
• Custom design: Supports layouts that do not fit a simple grid.
• Overlays: Filters, legends, images, and text can appear over other objects.
• Space flexibility: Objects can use areas of a chart that would otherwise remain unused.
• Layer control: Multiple objects can be arranged in a front-to-back order.
• Creative dashboards: Useful for branded reports and presentation-style designs.

3.5 Limitations of Floating Layouts

• Objects can unintentionally cover important chart information.
• Layout maintenance can become more complicated as the dashboard grows.
• Objects may become misplaced or overlap when dashboard dimensions change.
• Text, filters, and legends may be difficult to use on smaller screens.
• Precise placement may require additional testing and adjustment.
• Floating layouts may need more maintenance when dashboard content changes.

3.6 When Should You Use a Floating Layout?

Floating layouts can be useful when building:

• Dashboards with overlays and custom visual compositions.
• Dashboards with floating legends or filter panels.
• Reports with company logos placed at specific locations.
• Dashboards that use background images.
• Presentation-style dashboards requiring precise placement.
• Dashboards where an object needs to overlap another object intentionally.

4. Tiled vs Floating Layouts

5. How to Create a Tiled Dashboard

Step 1: Connect to a Data Source

Open Tableau Desktop or another supported authoring environment and connect to a dataset such as Sample - Superstore.

Step 2: Create Worksheets

Create the visualizations needed for the dashboard. For example, create Total Sales, Monthly Sales Trend, Sales by Category, and Profit by Region worksheets.

Step 3: Create a New Dashboard

1. Click the New Dashboard icon near the worksheet tabs, or use the Dashboard menu.
2. Rename the dashboard to Sales Performance Dashboard.
3. Choose an appropriate dashboard size.

Step 4: Select Tiled Placement

1. Locate the Objects section in the Dashboard pane.
2. Select the Tiled layout option if your Tableau interface displays a Tiled/Floating selector.
3. Drag a worksheet or object onto the dashboard canvas.
4. Observe the shaded placement area before releasing the object.

Step 5: Add Other Worksheets

Drag the remaining worksheets onto the dashboard. Place them above, below, or beside existing objects according to the layout indicator.

Step 6: Arrange the Objects

Use horizontal and vertical containers to group related charts and KPI cards. Resize the objects and check that they fit together without overlapping.

Step 7: Add Filters and Formatting

Add the required filters, titles, legends, and supporting text. Adjust the spacing and number formats.

Step 8: Test the Dashboard

Change the dashboard size and check whether objects remain readable, charts fit the available space, and filters remain accessible.

6. How to Create a Floating Dashboard Object

Step 1: Open the Dashboard

Open the dashboard in which you want to position an object independently.

Step 2: Select the Object

Choose the worksheet, legend, image, filter, or other object you want to float.

Step 3: Enable Floating Placement

Depending on the Tableau interface, select Floating in the Objects pane before dragging a new object onto the canvas, or open an existing object's shortcut menu and select Floating.

Step 4: Position the Object

Drag the object to the desired location. Resize it by dragging its edges or by entering dimensions in the Layout pane.

Step 5: Adjust the Layer Order

If the object overlaps other floating objects, use the item hierarchy or available ordering controls to determine which object appears in front.

Step 6: Check Readability

Ensure the floating object does not obscure important data, chart labels, or other controls.

Step 7: Test Different Dashboard Sizes

Resize the dashboard or preview it in the intended viewing environment. Adjust the object's location and dimensions if needed.

Official reference: Tableau – Size and Lay Out Your Dashboard.

7. Switching an Existing Object from Tiled to Floating

You do not always need to recreate an object to change its layout. Tableau provides controls for changing the placement of existing dashboard objects.

1. Open the dashboard.
2. Select the object you want to change.
3. Open the object's shortcut or drop-down menu.
4. Select Floating.
5. Adjust the position and size.
6. Check whether the change affects surrounding objects or overlaps important information.

To return an object to a tiled layout, select the object and choose Tiled from its available layout menu or controls.

Important: Exact menu locations may vary by Tableau version and authoring environment.

8. Using the Shift Key to Create a Floating Object

In Tableau Desktop, holding down Shift while dragging a new dashboard object onto the canvas can assign it a floating layout.

Steps

1. Open the dashboard.
2. Locate the worksheet or object you want to add.
3. Hold down the Shift key.
4. Drag the object onto the dashboard.
5. Release the mouse button and then the Shift key.
6. Confirm that the object has floating placement.
7. Adjust its size and position as required.

This shortcut can save time when you need to float only a few objects in an otherwise tiled dashboard. Verify the behavior in your Tableau version.

9. Understanding Layout Containers

Layout containers are important when creating structured tiled dashboards. They group objects and help manage how the objects resize and align.

9.1 Horizontal Container

A horizontal container arranges objects side by side and helps manage their widths.

Example: Three KPI cards for Sales, Profit, and Orders are placed in one row.

9.2 Vertical Container

A vertical container arranges objects in a top-to-bottom sequence and helps manage their heights.

Example: A dashboard title appears above a sales chart and a supporting table.

9.3 How to Add a Layout Container

1. Open the Dashboard pane.
2. Locate the Objects section.
3. Select Horizontal or Vertical.
4. Drag the container onto the dashboard.
5. Drag worksheets and objects into the container.
6. Adjust spacing and sizing.

9.4 Example of Nested Containers

Vertical Container
|
+-- Dashboard Title
|
+-- Horizontal Container
|   +-- Total Sales KPI
|   +-- Total Profit KPI
|   +-- Total Orders KPI
|
+-- Horizontal Container
|   +-- Monthly Sales Trend
|   +-- Sales by Category
|
+-- Profit by Region

Nested containers allow you to combine horizontal and vertical arrangements into a more complex dashboard structure.

9.5 Benefits of Layout Containers

• Keep related objects together.
• Make alignment and spacing easier to maintain.
• Help objects resize together.
• Make dashboards easier to update.
• Support structured layouts for multiple worksheets.

Official reference: Tableau Layout Containers and Dashboard Organization.

10. Configuring the Position and Size of Floating Objects

Floating objects provide more precise control over their placement. Tableau's Layout pane can be used to configure the position and dimensions of a selected object.

10.1 Position Coordinates

The Layout pane can provide X and Y position settings for a floating object. These coordinates are measured in pixels relative to the dashboard's top-left corner.

• X position: Controls the object's horizontal location.
• Y position: Controls the object's vertical location.
• Width: Controls the object's horizontal dimension.
• Height: Controls the object's vertical dimension.

10.2 Example

Suppose a floating filter panel should appear near the upper-right corner of a fixed-size dashboard. You can adjust its X and Y coordinates and set a suitable width and height in the Layout pane.

The exact values depend on the dashboard dimensions and the space needed by the object.

10.3 Keyboard Adjustments

In supported Tableau Desktop layouts, arrow keys can move selected floating objects in small increments. Shift with an arrow key can move an object in larger increments, while Alt on Windows or Option on macOS with the arrow keys can assist with resizing in supported workflows.

Use these controls when precise placement is required, and verify the result visually.

11. Understanding Object Layering

Layering determines which object appears in front when dashboard objects overlap.

11.1 Example

Suppose a floating text label overlaps a floating map legend. The layer order determines whether the text appears above the legend or the legend covers the text.

11.2 Managing Layer Order

1. Select the dashboard object.
2. Open the Layout pane.
3. Locate the item hierarchy when available.
4. Reorder floating objects as required.
5. Check that the intended object is visible in front.

In supported Tableau interfaces, objects higher in the hierarchy appear in front of objects below them. Check the actual hierarchy and result when rearranging dashboard elements.

12. Combining Tiled and Floating Layouts

A dashboard does not need to use only one layout style. Many professional dashboards combine a structured tiled layout with a small number of floating objects.

12.1 Example

A sales dashboard can use tiled containers for the main KPI cards and charts, while a floating company logo, legend, or filter panel provides additional flexibility.

12.2 Advantages of a Combined Layout

• Maintains a structured main dashboard.
• Provides independent positioning for selected objects.
• Allows overlays without requiring the entire dashboard to float.
• Balances maintainability and design flexibility.

12.3 Recommended Approach

1. Start by organizing the main charts with tiled objects and layout containers.
2. Identify objects that genuinely need independent placement.
3. Change only those objects to floating.
4. Adjust their positions and layer order.
5. Test the result at different dashboard dimensions.

13. Dashboard Size and Layout Behavior

The dashboard's sizing option affects how tiled and floating objects behave when the viewing window changes.

Floating objects may not maintain the same visual relationship to charts when the dashboard is resized. For floating-heavy dashboards, a fixed-size canvas can provide more predictable placement. For flexible viewing environments, carefully test tiled layouts and available device-specific layouts.

Official reference: Dashboard Size and Layout Options.

14. Example: Creating a Retail Sales Dashboard

Scenario: A retail company wants to display sales, profit, product categories, and regional performance.

14.1 Required Worksheets

• Total Sales KPI.
• Total Profit KPI.
• Monthly Sales Trend.
• Sales by Category.
• Profit by Region.

14.2 Build the Tiled Structure

1. Create a new dashboard named Retail Sales Overview.
2. Set a suitable dashboard size.
3. Add a horizontal container across the top.
4. Place the Total Sales and Total Profit KPI sheets in the container.
5. Add another horizontal container for the monthly trend and category chart.
6. Place the regional profit chart in a separate section.
7. Add filters for Year and Region.

14.3 Add a Floating Object

1. Drag a legend or filter panel onto the dashboard using floating placement.
2. Position it in an area that does not cover important data.
3. Set its size and position.
4. Check its layer order if it overlaps another floating object.
5. Test the dashboard at its intended size.

14.4 Expected Result

+--------------------------------------------------+
|                 RETAIL SALES OVERVIEW            |
+--------------------------------------------------+
| Total Sales KPI       | Total Profit KPI          |
+--------------------------------------------------+
| Monthly Sales Trend   | Sales by Category         |
|                       |                           |
+--------------------------------------------------+
| Profit by Region               [Floating Filter]  |
+--------------------------------------------------+

This example uses a tiled structure for the primary views and a floating object for a filter panel. The actual dashboard arrangement depends on the data and reporting requirements.

15. Common Problems and Solutions

16. Best Practices for Tiled and Floating Layouts

• Start with tiled layouts for the main dashboard structure.
• Use horizontal and vertical containers to organize related objects.
• Use floating placement only when independent positioning provides a clear benefit.
• Avoid covering important chart marks, labels, or controls with floating objects.
• Choose a dashboard size before making detailed layout adjustments.
• Keep related KPI cards and charts aligned.
• Use consistent padding, spacing, and formatting.
• Test dashboards at different screen sizes.
• Review object layering when floating objects overlap.
• Use a fixed-size dashboard when precise floating placement is important.
• Consider device-specific layouts for dashboards intended for phones and tablets.
• Keep the dashboard simple enough for other developers to maintain.

17. Interview Questions and Answers

Q1. What is a tiled layout in Tableau?

Answer: A tiled layout arranges dashboard objects in a structured grid. Objects share the available space and do not overlap one another.

Q2. What is a floating layout?

Answer: A floating layout lets objects be positioned and sized independently, including the ability to overlap other objects.

Q3. What is the main difference between tiled and floating layouts?

Answer: Tiled objects follow the dashboard's structured layout, while floating objects can be placed independently and layered over other objects.

Q4. Which layout is better for a standard business dashboard?

Answer: Tiled layout is generally a good starting point because it helps maintain alignment and makes the dashboard easier to manage.

Q5. When should you use a floating layout?

Answer: Use floating placement when an object needs precise positioning, must overlap another object, or should appear over unused space in a chart.

Q6. Can a dashboard contain both tiled and floating objects?

Answer: Yes. A dashboard can use tiled objects for its main structure and floating objects for selected overlays or independently positioned elements.

Q7. What is the purpose of a layout container?

Answer: A layout container groups objects and helps manage their arrangement and resizing. Horizontal containers arrange objects side by side, while vertical containers stack them.

Q8. How do you change a tiled object to floating?

Answer: Select the object, open its shortcut menu, and choose Floating where the option is available.

Q9. How can you control the position of a floating object?

Answer: Use the Layout pane to adjust its X and Y coordinates and its width and height, or drag and resize the object directly.

Q10. Why can floating layouts be difficult to maintain?

Answer: Floating objects can overlap other elements or become poorly positioned when the dashboard size changes.

Q11. How can you improve a dashboard that contains too many floating objects?

Answer: Use tiled layouts and containers for the main structure, retaining floating placement only for objects that genuinely require it.

Q12. Why is dashboard size important when using floating objects?

Answer: A change in dashboard dimensions can alter the visual relationship between floating objects and the underlying charts. A fixed-size dashboard often makes precise positioning more predictable.

18. Practical Exercises

1. Create a tiled dashboard with three KPI cards and two charts.
2. Arrange the KPI cards inside a horizontal container.
3. Place two charts inside a vertical container.
4. Create a floating legend and position it over unused chart space.
5. Switch an existing floating object back to tiled placement.
6. Create a dashboard that combines tiled charts with a floating filter panel.
7. Adjust the position and size of a floating object using the Layout pane.
8. Change the dashboard size and observe how the objects respond.
9. Correct an overlapping floating object that hides important chart information.
10. Build two versions of the same dashboard and compare tiled and floating arrangements.

19. Quick Revision Notes

• Tiled and floating layouts determine how dashboard objects are arranged.
• Tiled objects follow a structured layout and do not overlap.
• Floating objects can be positioned independently and can overlap other objects.
• Tiled layouts are a good starting point for standard business dashboards.
• Floating layouts are useful for overlays, precise positioning, and custom designs.
• Horizontal containers arrange objects side by side.
• Vertical containers arrange objects from top to bottom.
• The Layout pane helps control the position and size of floating objects.
• A dashboard can combine tiled and floating objects.
• Fixed-size dashboards can make precise floating placement more predictable.
• Always test object placement, readability, and layout behavior before publishing.

20. Conclusion

Tiled and floating layouts are fundamental concepts in Tableau dashboard design. Tiled layouts help organize visualizations into a structured grid, while floating layouts provide greater flexibility for independent positioning and overlapping objects.

For most dashboards, start with a tiled structure and use layout containers to maintain alignment. Introduce floating objects only where they improve the design or user experience. By understanding both approaches, you can build dashboards that are visually consistent, easy to maintain, and suitable for business analysis.

21. Additional Learning Resources

Official Tableau documentation: Size and Lay Out Your Dashboard

Create a dashboard: Create a Dashboard – Tableau Help

Dashboard design guidance: Tableau – Dashboard Design: Tiled vs. Floating Layouts

JustAcademy Tableau Training: Explore Tableau Training

Register for a Tableau Course Demo: Register for a Course Demo