You were close - you just needed to assign a width to the right pane that contains the tab. You can do this by setting an id for the tab pane to id="rightPane". The sample associates a css style with this id to set the pane's width to 30%. Here's the modified code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>
</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/soria/soria.css">
<style type="text/css">
html, body {
height: 100%; width: 100%; margin: 0;
}
body{
background-color:white; overflow:hidden;
font-family: "Trebuchet MS";
}
.roundedCorners{
-moz-border-radius: 4px;
}
#header {
border: solid 2px #7EABCD;
background-color:white; color:peru; font-size:18pt;
text-align:center; font-weight:bold; height:60px;
}
#subheader {
font-size:small;
color: peru;
}
#rightPane{
background-color:white;
color:peru;
border: solid 2px cornflowerblue;
width:30%;
overflow:hidden;
}
#map {
background-color:white;
border:solid 2px cornflowerblue;
padding:0;
}
#footer {
border: solid 2px #7EABCD;
background-color:white;color:peru;font-size:10pt; text-align:center; height:40px;
}
.soria .dojoxGridHeader .dojoxGridCell {
color:peru !important;
}
</style>
<script type="text/javascript">
var djConfig = {
parseOnLoad: true
};
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2">
</script>
<script type="text/javascript">
dojo.require("dijit.dijit"); // optimize: load dijit layer
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
dojo.require("esri.map");
dojo.require("esri.toolbars.draw");
dojo.require("esri.layers.FeatureLayer");
dojo.require("esri.tasks.query");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
var map, toolbar;
var featureLayer;
function init() {
var initialExtent = new esri.geometry.Extent({
"xmin": -13092200,
"ymin": 3691751,
"xmax": -12538796,
"ymax": 3880092,
"spatialReference": {
"wkid": 102100
}
});
map = new esri.Map("map", {
extent: initialExtent
});
dojo.connect(map, 'onLoad', function(map) {
dojo.connect(dijit.byId('map'), 'resize', resizeMap);
});
var basemapUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer";
var featureLayerUrl = "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/EarthquakesFromLastSevenDays/MapServer/0";
var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapUrl);
featureLayer = new esri.layers.FeatureLayer(featureLayerUrl, {
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: ["region,magnitude,depth,objectid"]
});
featureLayer.setSelectionSymbol(new esri.symbol.SimpleMarkerSymbol().setSize(8).setColor(new dojo.Color([160, 214, 238])));
map.addLayer(basemap);
map.addLayer(featureLayer);
}
function resizeMap() {
//resize the map when the browser resizes - view the 'Resizing and repositioning the map' section in
//the following help topic for more details http://help.esri.com/EN/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_faq.htm
var resizeTimer;
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
map.resize();
map.reposition();
}, 500);
}
//show map on load
dojo.addOnLoad(init);
</script>
</head>
<body class="soria">
<div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"
style="width:100%; height:100%;">
<div id="header" dojotype="dijit.layout.ContentPane" class="roundedCorners" region="top">
HEADER
</div>
<div id="map" dojotype="dijit.layout.ContentPane" class="roundedCorners" region="center">
</div>
<div id="rightPane" dojoType="dijit.layout.TabContainer" region="right" tabStrip="true">
<div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true">
Stuff
</div>
<div dojoType="dijit.layout.ContentPane" title="My second tab">
Lorem ipsum and all around - second...
</div>
<div dojoType="dijit.layout.ContentPane" title="My last tab" closable="true">
Lorem ipsum and all around - last...
</div>
</div>
<!-- end TabContainer -->
<div id="footer" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="bottom">
This is the footer section
</div>
</div>
</body>
</html>
