Each sample is a simple HTML file that shows how to quickly create a layout using Dojo. We have put together a variety of common layouts that showcase how to embed a map in your page. Click on any screenshot to open the sample. To see the source code, right-click on the HTML page and view the source.

Each sample has reference to one CSS file for basic styling and one JavaScript file which has all the ArcGIS JavaScript API code to display the map. All the samples use two Dojo dijits for layouting — namely dijit.layout.BorderContainer and dijit.layout.ContentPane — in different configurations.

	Map is shown at 100% width and height, no borders or margin space. This layout is ideal for overlaying HTML elements on top of the map.
	Map is shown at 95% width and height, with border and 2% margin space. This layout is ideal for showing a background image or color to match other sites.
	Typical layout with header and footer regions at the top and bottom, with the map shown at the center. This layout is ideal for displaying a company logo, copyright info, links, and other menu items as needed.
	This is the same layout as above with header and footer regions at the top and bottom. In this case the center container is split into left (40%) and center (60%) regions with the map shown on the center. This layout is ideal for displaying a company logo, copyright info, links, and other menu items as needed in the header and footer areas. The left region can be used to add more functionalty to the application or add more Dojo UI widgets.
	This is the same layout as above with header and footer regions at the top and bottom. In this case the center container is split into center (60%) and right (40%) regions with the map shown on the center. This layout is ideal for displaying a company logo, copyright info, links, and other menu items as needed in the header and footer areas. The right region can be used to add more functionalty to the application or add more Dojo UI widgets.
	This is the same layout as above with header and footer regions at the top and bottom. In this case the center container is split into left (20%), center, and right (20%) regions with the map shown in the center. This layout shows the full power of a single "dijit.layout.BorderContainer" container which has 5 child containers (dijit.layout.ContentPane). The ordering of the child containers is defined by the attribute "region" which can have values "top,left,center,right,bottom". Also, the flow of the top and bottom can be set as either horizontal or vertical by using the attribute "design". In this sample the flow is horizonatal (design="headline"). This layout is ideal for displaying a company logo, copyright info, links and other menu items as needed in the header and footer areas. The left and right regions can be used to show results, add more functionalty to the application, or even add more Dojo UI widgets.
	The same layout as above but in this case we have used vertical flow for top and bottom child containers (i.e. design="sidebar" attribute for the dijit.layout.BorderContainer)