Webflow's Style Panel gives you several layout methods to help you position content in your project.
There are several different layout controls in the Style panel that allow you to control the positioning and behavior of elements. In this introduction, we’ll provide an overview of each layout control in the Style panel, including links to more detailed articles about each.
Display settings determine how an element is displayed within the document flow. All elements come with a default display layout you can update in the display settings in the Style panel.
Certain display layouts are disabled for some elements to preserve the functionality of the component.
There are 6 display options:
Margin and padding let you create space inside or outside of an element's boundary. Padding controls the space between an element's content and its boundary, while margin creates space outside the element.
Margins and paddings make it possible to create responsive websites whose content reflows while creating consistent spacing.
How tall or wide an element is depends on what values you set for the width or height properties. These dimensions can be fixed values with units like pixels(px) or relative values with units like percent(%).
In the size settings, you can also specify minimum and maximum values for width and height. Minimum values allow the element to grow as much as it needs to without shrinking below the minimum. Maximum values allow the element to grow up until the maximum value.
The default value for width and height is “auto” which allows the element to expand and grow larger when the content inside increases. Content in elements with a fixed height may overflow their container.
By default, content will overflow — spill outside — of an element’s boundaries when it goes beyond the set size. You can specify whether to hide the overflowing content or to add scrollbars to the element with the fixed dimensions.
Position settings allow you to reposition elements within the document flow.
Here, you can change the position, float, and clear settings.
The position property lets you reposition elements based on their current location, their parent's dimensions, or the dimensions of the viewport (i.e., the browser window's).
Float and clear let you reposition an element relative to the position of their adjacent element.
Float is great for wrapping text around an element, like when text wraps around an image in a magazine layout. Floating multiple elements will align them side by side.
Setting clear on an element will make sure it does not wrap around a floating element.
Last but not least, you can apply a 2D or 3D effect on any element without changing the actual element’s dimensions or affecting the document flow. Transforms such as translate or move, scale, rotate, and skew allow you to control how an element appears and transforms in various states and when a user interacts with your element.
Something went wrong while submitting the form. Please contact firstname.lastname@example.org