---
schema_version: "1"
id: d0a8e7b33476db0b4dbc1b5825724c3d9562f0e42b757c253d2e1ab9d7b1d535
title: Position Panels Using CSS
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/platform/264-0-0/siteforce_panel_position.md
canonical_url: https://help.salesforce.com/s/articleView?id=platform.siteforce_panel_position.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 2c1586f0a318efadfe79041b5fa760e37ed7201e731b0c696be8c0e6e9d0c331
description: A panel is a useful layout tool that defines the logical divisions of your page. Using CSS, you can position panels and improve the layout of the page.
products:
  - Salesforce Platform
  - Security
release: "264"
---
# Position Panels Using CSS

A panel is a useful layout tool that defines the logical divisions of your page. Using CSS, you can position panels and improve the layout of the page.

### Required Editions

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition">
      <colgroup>
        <col>
      </colgroup>
      <tbody>
        <tr class="">
          <td class="slds-cell-wrap" style="vertical-align:top;">Available in: Salesforce Classic</td>

        </tr>
        <tr class="">
          <td class="slds-cell-wrap" style="vertical-align:top;">
            <p>Available for purchase in: <strong>Enterprise</strong>, <strong>Performance</strong>, and
              <strong>Unlimited</strong> Editions
            </p>
            <p style="margin-bottom:0;">Available (with limitations) in:
              <strong>Developer</strong> Edition
            </p>
          </td>

        </tr>
      </tbody>
    </table> <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small permission">
      <colgroup>
        <col style="width:50%">
        <col style="width:50%">
      </colgroup>
      <thead class="slds-text-title_caps ">
        <tr class="">
          <th scope="colgroup" class="slds-cell-wrap" colspan="2" style="text-align:center;vertical-align:top;" id="d72537e72">User
            Permissions Needed</th>
        </tr>
      </thead>
      <tbody>
        <tr class="">
          <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d72537e72 ">To build, edit, and manage Site.com sites:</td>

          <td class="slds-cell-wrap" style="vertical-align:top;" headers="d72537e72 ">
            <p><samp class="parmname">Site.com Publisher User</samp> field enabled on the
              user detail page</p>
            <p>AND</p>
            <p style="margin-bottom:0;">Site administrator or designer role
              assigned at the site level</p>
          </td>

        </tr>
      </tbody>
    </table>

## Adding Padding and Margins to Panels

Two CSS properties—[margins and padding](https://help.salesforce.com/s/articleView?id=platform.siteforce_style_tab_properties.htm&release=264.0.0&type=5)—can help with your page layout by creating space between the rows and columns, and the content within. The margin property controls the space outside the panel between its border and outer edge, while the padding property controls the space between the panel's content and border.

To add margins and padding:

1. Select the panel.
2. Open the Dimensions section of the Style pane.
3. In the Margins section, either:
    - Set the margin width for all four sides by entering a value in the All text box and selecting the unit of measurement.
    - Set the margin widths for the top, right, bottom, or left sides independently by entering a value in the appropriate text box and selecting the unit of measurement.
4. Similarly, in the Padding section, set the padding widths as required. Adding padding increases the total width of the panel. For example, if you have a panel with a width of 500px and you add padding of 20px to all sides, the total width of the panel will be 540px.

![Tip](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/images/icon_tip.png)

Tip You can center a panel or block page element using the margin property. Enter 0 in the All text box and select **Auto** in the drop-down list.

## Creating Column Panels Using the Float Property

If you need to add more divisions to the page and you're not familiar with CSS, the easiest method is to use [row and column panels](https://help.salesforce.com/s/articleView?id=platform.siteforce_panel_add.htm&release=264.0.0&type=5 "A panel is a useful layout tool that defines the logical divisions of your page and lets you group page elements together for easy movement and positioning. Think of it as a container for other page elements, including other panels, or as a div that wraps around the content placed within it. Panels are ideal for adding editable areas to page templates."). Alternatively, using the CSS [float](https://help.salesforce.com/s/articleView?id=platform.siteforce_style_tab_properties.htm&release=264.0.0&type=5) property, you can position panels to the left or right to create columns. (When you add panels using the row and column panels feature, they're automatically positioned using the float property.) For example, you could add two single panels to a container panel and set both panel's float and width properties to create a two-column page layout.

To create a column panel:

1. Select the panel.
2. Open the Layout section of the Style pane.
3. Click ![Float left](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/extend_click/images/siteforce_css_floatL.png) to float the panel to the left, or click ![Float right](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/extend_click/images/siteforce_css_floatR.png) to float the panel to the right. If you're creating a two-column layout, for example, ensure you set the float property of both panels.
4. Adjust the width of the panel to ensure the panels align correctly by either setting the width in the Dimensions section or dragging the panel's border on the page. For example, if you're creating two columns of equal width, set the width of both panels to 50%.

![Tip](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/images/icon_tip.png)

Tip When you use the float property, remember to set the overflow property of the container panel to “hidden.” This allows the container panel to grow as the height of the column panels increase. Select the container panel and in the Layout section of the Style pane, select **Hidden** in the Overflow drop-down list.

#### See Also

- [Cascading Style Sheets Overview](https://help.salesforce.com/s/articleView?id=platform.siteforce_style_overview.htm&release=264.0.0&type=5 "Cascading Style Sheets (CSS) provide a flexible way to add style to the pages of your website. This collection of formatting rules governs the appearance of your pages, and lets you define the fonts, colors, layout, and other presentation features.")
- [Lay Out Site.com Pages Using Panels](https://help.salesforce.com/s/articleView?id=platform.siteforce_panel_add.htm&release=264.0.0&type=5 "A panel is a useful layout tool that defines the logical divisions of your page and lets you group page elements together for easy movement and positioning. Think of it as a container for other page elements, including other panels, or as a div that wraps around the content placed within it. Panels are ideal for adding editable areas to page templates.")