Basic layout equations (advanced)

Depending on which layout alignment selection you've chosen in a style, Squarespace will augment your Custom CSS with the following CSS in order to produce the proper layout.

3 Columns / Content Right

#canvasWrapper { width: $(ContentWidth+Sidebar1Width+Sidebar2Width+ContentPaddingInternal+ContentPaddingInternal)$; padding: 0 $ContentPaddingExternal$ 0 $ContentPaddingExternal$; }
#sidebar1Wrapper { display: block; float: left; width: $Sidebar1Width$; padding: 0; }
#sidebar2Wrapper { display: block; float: left; width: $Sidebar2Width$; padding: 0; padding-left: $ContentPaddingInternal$; }
#contentWrapper { float: right; width: $ContentWidth$; }


3 Columns / Content Center

#canvasWrapper { width: $(ContentWidth+Sidebar1Width+Sidebar2Width+ContentPaddingInternal+ContentPaddingInternal)$; padding: 0 $ContentPaddingExternal$ 0 $ContentPaddingExternal$; }
#sidebar1Wrapper { display: block; float: left; width: $Sidebar1Width$; padding: 0; padding-right: $ContentPaddingInternal$; }
#sidebar2Wrapper { display: block; float: right; width: $Sidebar2Width$; padding: 0; }
#contentWrapper { float: left; width: $ContentWidth$; }


3 Columns / Content Left

#canvasWrapper { width: $(ContentWidth+Sidebar1Width+Sidebar2Width+ContentPaddingInternal+ContentPaddingInternal)$; padding: 0 $ContentPaddingExternal$ 0 $ContentPaddingExternal$; }
#sidebar1Wrapper { display: block; float: right; width: $Sidebar1Width$; padding: 0; }
#sidebar2Wrapper { display: block; float: right; width: $Sidebar2Width$; padding: 0; padding-right: $ContentPaddingInternal$; }
#contentWrapper { float: left; width: $ContentWidth$; }


2 Columns / Content Left

#canvasWrapper { width: $(ContentWidth+Sidebar1Width+ContentPaddingInternal)$; padding: 0 $ContentPaddingExternal$ 0 $ContentPaddingExternal$; }
#sidebar1Wrapper { display: block; float: right; width: $Sidebar1Width$; padding: 0; }
#sidebar2Wrapper { display: none; float: left; width: $Sidebar2Width$; padding: 0; }
#contentWrapper { float: left; width: $ContentWidth$; }"


2 Columns / Content Right

#canvasWrapper { width: $(ContentWidth+Sidebar1Width+ContentPaddingInternal)$; padding: 0 $ContentPaddingExternal$ 0 $ContentPaddingExternal$; }
#sidebar1Wrapper { display: block; float: left; width: $Sidebar1Width$; padding: 0; }
#sidebar2Wrapper { display: none; float: right; width: $Sidebar2Width$; padding: 0; }
#contentWrapper { float: right; width: $ContentWidth$; }


1 Column

#canvasWrapper { width: $ContentWidth$; padding: 0 $ContentPaddingExternal$ 0 $ContentPaddingExternal$; }
#sidebar1Wrapper { display: none; }
#sidebar2Wrapper { display: none; }
#contentWrapper { width: $ContentWidth$; }

Was this article helpful?
0 out of 0 found this helpful
Basic layout equations (advanced)