Responsive design layout pattern – Horizontal centered

This layout pattern has one main container which is always centered horizontally. The main container can contain other containers.

There are 4 variants for this layout pattern:

  • Horizontal centered fixed width.
  • Horizontal centered maximum width.
  • Horizontal centered variable sidebars.
  • Horizontal centered fixed sidebars

All four layout patterns are shown and described in detail in the video below.

In the formula’s below, several global variables are used:

NameValue
glb_MaxWidth1000
glb_Width1100

The canvas app with the layout patterns described on this page can be downloaded from my GitHub repository.

Horizontal centered fixed width

The main container has a fixed width. This means that when the screen width becomes less than the container width, parts of the container are not visible anymore.

This layout pattern is not useful when a small screen width must be possible.

Formula’s

ControlPropertyFormula
ContainerWidthglb_MaxWidth
ContainerXIf(App.Width > glb_MaxWidth, (App.Width - glb_MaxWidth) / 2, 0)

Horizontal centered maximum width

The main container has a maximum width. This means that when the screen width is larger than this maximum, sidebars are automatically shown. When the screen width is smaller than the maximum width, no sidebars are shown and the container width is the same as the screen width.

An example of this layout pattern with content is shown and described in this video.

This layout pattern is my favorite and used for many other responsive design layout pattern examples.

Formula’s

ControlPropertyFormula
ContainerWidthIf(App.Width > glb_MaxWidth, glb_MaxWidth, App.Width)
ContainerXIf(App.Width > glb_MaxWidth, (App.Width - glb_MaxWidth) / 2, 0)

Horizontal centered variable sidebars

The screen consists of 3 areas:

  1. The left container (sidebar).
  2. The content container.
  3. The right container (sidebar).

The width of the sidebars is a percentage of the screen width. This also applies to the content container.

As can been seen in the video, this setup uses 4 containers. A main container which covers the whole screen and 3 sub-containers. The main container has a horizontal direction. There is a sub-container for each sidebar and one for the content. All sub-containers are configured to have a flexible width. In the example shown, the width of a sidebar is 1/10 of the screen width.

Formula’s

ControlPropertyFormula
Main containerWidthApp.Width
Main containerHeightApp.Height

No other formula’s were needed. Quite simple right?

Horizontal centered fixed sidebars

The screen consists of 3 areas:

  1. The left container (sidebar).
  2. The content container.
  3. The right container (sidebar).

The width of the sidebars are fixed meaning that the their width does not depend on the screen width. The width of the content container then does vary on the screen width.

As can been seen in the video, this setup uses 4 containers. A main container which covers the whole screen and 3 sub-containers. The main container has a horizontal direction. There is a sub-container for each sidebar and one for the content. Both sidebar sub-containers are configured to NOT have a flexible width. The content sub-container therefore has a width of the screen width minus the width of the left sidebar and the width of the right sidebar.

Formula’s

ControlPropertyFormula
Main containerWidthApp.Width
Main containerHeightApp.Height
Sidebar sub-containerWidthglb_Width1

Leave a Reply

Your email address will not be published. Required fields are marked *