|
How to get your website to wrap to browser width.
1. First create a new blank site. For the purpose of this tutorial change the Site Style to Crossblock Blue-Orange.
2. While in Page View, make sure you can see Master Border properties (click on the top left Master Border tag if necessary). Next click the down arrow (next to "Name DefaultMasterBorder" in the MasterBorder Properties menu) you should see two options ZeroMargins and DefaultMasterBorder, change the setting to ZeroMargins (the Banner and Navigation button should disappear).

3. At the top left of your page create a text box, size this to the visible width of your page, and using the Text Box Properties (click on the middle tab) and select (using the check boxes) the "Size layout to text" and "Contents wrap to browser width" options.

4. Next create a 1 column x 2 rows table and place into the text box. Make sure the table is set to "Relative width" in the Table Properties menu. The alignment will automatically be set to left wrap, which is correct. Stretch your table (to the right) to fill your text box at this point leave the "Table border" on to make placing of objects and tables easier.

5. Place your banner into the first/top cell (if you change the background colour to #CCCCCC (or R:204, G:204, B:204) this gives the effect that the banner stretches to the right). In the second/lower cell insert two more tables (1 column x 1 row) the first table (on the left) will be a left hand border area (for vertical menu, etc.) and the second table (on the right) is the area in which to place your content. Set the left hand table to be "Fixed width" and size this manually to be the same size as the left hand border. The right hand table (set to "Relative width") can be stretched to the right to the edge of the text box. When published this table will stretch to the right when opened in different browser resolutions.
6. When you have finished placing the tables, remove the borders from the tables (set to 0) and the cell spacing and padding from the first table, then in Site View export this page as Template which you can reuse.
7. When you return to Page View you can now add content to the page and publish. |