### Create new RichFaces Documentation Jira issue

Summary
255 characters left
Description
Environment
This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.org Community Documentation

- Prev
- Next

### 6.13.2. < rich:layout > available since 3.3.1

expand all

#### 6.13.2.1. Description

The <rich:layout> component is designed to build layouts basing on Yahoo UI Grids CSS

Figure 6.284. The <rich:layout> component

#### 6.13.2.2. Key Features

- Cross-borwser compatibility

- Easy layout creation

Table 6.516. rich : layout attributes

Attribute Name | Description
--- | ---
binding | JSF: The attribute takes a value-binding expression for a component property of a backing bean
id | JSF: Every component may have a unique id that is automatically created if omitted
rendered | JSF: If "false", this component is not rendered

Table 6.517. Component identification parameters

Name | Value
--- | ---
component-type | org.richfaces.layout
component-class | org.richfaces.component.html.HtmlLayout
component-family | org.richfaces.Layout
renderer-type | org.richfaces.LayoutRenderer
tag-class | org.richfaces.taglib.layoutTag

#### 6.13.2.3. Creating the Component with a Page Tag

To create the simplest layout with the <rich:layout> on a page, use the following syntax:

Example:

    ...

    <rich:layout>

            <rich:layoutPanel position="center">

                    <!--center-->

            </rich:layoutPanel>

    </rich:layout>

    ...

#### 6.13.2.4. Creating the Component Dynamically Using Java

Example:

    import org.richfaces.component.html.HtmlLayout;

    ...

    Htmllayout mylayout = new HtmlLayout();

    ...

#### 6.13.2.5. Details of Usage

The <rich:layout> allows to build a grid that can be used to make the layout on a page. The <rich:layout> is used in conjunction with the <rich:layoutPanel> that is used as a child element and carries the main burden of building the grid.

Hence, you need to use the <rich:layout> as a container and <rich:layoutPanel> to create areas inside the container.

This is how you can make a layout with 5 areas:

Example:

    ...

    <rich:layout>

            <rich:layoutPanel position="top">

                    <!--top-->

            </rich:layoutPanel>

            <rich:layoutPanel position="left">

                    <!--left-->

            </rich:layoutPanel>

            <rich:layoutPanel position="center">

                    <!--center-->

            </rich:layoutPanel>

            <rich:layoutPanel position="right">

                    <!--right-->

            </rich:layoutPanel>

            <rich:layoutPanel position="bottom">

                    <!--bottom-->

            </rich:layoutPanel>

    </rich:layout>

    ...

To get more details about <rich:layoutPanel> please read the chapter about layoutPanel in the guide.

#### 6.13.2.6. Relevant Resources Links

Visit layout page at RichFaces Live Demo for examples of component usage and their sources.

The Layout components for RichFaces 3.3.1 on the JBoss.org Wiki

- Prev6.13.1. < rich:page > ...
- Top of page
- Front page
- Next6.13.3. < rich:layoutPanel > ...