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
| Available in: Salesforce Classic |
Available for purchase in: Enterprise, Performance, and Unlimited Editions Available (with limitations) in: Developer Edition |
| User Permissions Needed | |
|---|---|
| To build, edit, and manage Site.com sites: | Site.com Publisher User field enabled on the user detail page AND Site administrator or designer role assigned at the site level |
Adding Padding and Margins to Panels
Two CSS properties—margins and padding—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:
- Select the panel.
- Open the Dimensions section of the Style pane.
- 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.
- 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.
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. Alternatively, using the CSS float 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:
- Select the panel.
- Open the Layout section of the Style pane.
- Click
to
float the panel to the left, or click 
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. - 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%.
