Question : CSS

Can someone tell me how to change my CSS so the main content area expands to the size of the text.

www.toodles.com/source/policies.html

My CSS code is below

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:

           
           
          @charset "utf-8";
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #CAFFFE;
	margin: 10; 
	padding: 10;
	text-align: center; 
	color: #000000;
}
body {
	font-size: 16px;	
}

.twoColElsRt #container { 
	width: 790px;
	height: 800px;
	background: #ffffff;
	padding: 20px 0;
	margin: 0 auto; 
	//border: 1px solid #000000;
	text-align: left; 
} 

.twoColElsRt #movie  {
	margin-top:20px;
	margin-left:8px;
	margin-right: 18px;
	padding-left:190px;
	font-size:12px;
	test-align:center;
	color:#000;
}


.twoColElsRt #sidebar1 h3, #sidebar1 h4, .twoColElsRt #sidebar1 p {
	margin-left: 15px;
	margin-right: 10px;
	font-size: 15px;
	color: #000;
}

.twoColElsRt #sidebar1 {
      float: right;
	  color: #fff;
	  width: 175px; 
	  height:800; 
	  padding-left: 5px; 
}
.twoColElsRt #sidebar1Img1 {
	position: relative;
	margin-left:20px;
    margin-top:22px;
}

.twoColElsRt #sidebar1-text  {
	margin-top:10px; 
	margin-left:8px;
	margin-right: 18px;
	font-size:12px;
	test-align:center;
	color:#000;
}
.twoColElsRt #sidebar1Img2 {
	position: relative;
	margin-left:10px;
    margin-top:22px;
	
}
.twoColElsRt #sidebar2 {
	float: left;
	color: #fff;
	width: 130px; 
	height:790px; 
	padding-top: 10px;
	padding-right: 5px; 
	background-image: url(graphics/spiral_border.gif);
	background-repeat: repeat;
}

.twoColElsRt #sidebar2,  .twoColElsRt #sidebar2 p {	
	margin-left: 5px; 
	padding-left: 5px;
	font-size: 15px;
	color: #000;
}

.twoColElsRt #mainContent {
	margin: 20px 180px 0 170px;
	padding-top:20;
} 

.fltrt { 
	float: right;
	margin-left: 8px;
}
.fltlft { 
	float: left;
	margin-right: 8px;
}
.clearfloat { 
	clear:both;
    height:0;
    font-size: 12px;
    line-height: 0px;
}

a:link  {
	color:#000;
	font-weight: bold;
	font-size:12px;
	text-decoration: none;
}
a:hover {
	color:#000;
	font-weight: bold;
	font-size:16px;
	text-decoration: none;
}
a:active  {
	color:#000;
	text-decoration: none;
}
a:visited  {
	color:#000;	
	text-decoration: none;
}

h1  {font-size:30px;}

h2  {
	font-size:20px;
	color: #333;
}

h4  {
	font-size:10px;
	color: #000;
}

           
         

Answer : CSS

also, there is indeed an issue with your css.
( you'll really have to clean up that html like I said in my previous comment, but that alone won't be enough )

Remove "sidebar2" ( from your css and html, you don't need it )

in you CSS change/add these rules:

.twoColElsRt #container {
height:auto;
background-image:url("graphics/spiral_border.gif");
background-position:top left;
background-repeat:repeat-y;
}

and that should do it :)