Как задать высоту блока от его содержимого текста ?

.tabs { 
position: relative; 
margin: 40px auto; 
width: 750px; 
} 
.tabs input { 
position: absolute; 
z-index: 1000; 
width: 120px; 
height: 40px; 
left: 0px; 
top: 0px; 
opacity: 0; 
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
filter: alpha(opacity=0); 
cursor: pointer; 
} 
.tabs input#tab-2 { 
left: 120px; 
} 
.tabs input#tab-3 { 
left: 240px; 
} 
.tabs input#tab-4 { 
left: 360px; 
} 
.tabs label { 
background: #f60; 
background: -moz-linear-gradient(top, #f60 0%, #f60 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f604), color-stop(100%, #f60)); 
background: -webkit-linear-gradient(top, #f60 0%, #f60 100%); 
background: -o-linear-gradient(top, #f60 0%, #f60 100%); 
background: -ms-linear-gradient(top, #f60 0%, #f60 100%); 
background: linear-gradient(top, #f60 0%, #f60 100%); 
font-size: 14px; 
line-height: 40px; 
height: 40px; 
position: relative; 
padding: 0 20px; 
float: left; 
display: block; 
width: 80px; 
color: #fff; 
letter-spacing: 1px; 
text-transform: uppercase; 
font-weight: bold; 
text-align: center; 
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3); 
border-radius: 3px 3px 0 0; 
box-shadow: 2px 0 2px rgba(0, 0, 0, 0.1), -2px 0 2px rgba(0, 0, 0, 0.1); 
} 
.tabs label:after { 
content:''; 
background: #f60; 
position: absolute; 
bottom: -2px; 
left: 0; 
width: 100%; 
height: 2px; 
display: block; 
} 
.tabs input:hover + label { 
background: #5ba4a4; 
} 
.tabs label:first-of-type { 
z-index: 4; 
box-shadow: 2px 0 2px rgba(0, 0, 0, 0.1); 
} 
.tab-label-2 { 
z-index: 3; 
} 
.tab-label-3 { 
z-index: 2; 
} 
.tab-label-4 { 
z-index: 1; 
} 
.tabs input:checked + label { 
background: #f60; 
z-index: 6; 
-webkit-animation: page 0.2s linear; 
-moz-animation: page 0.2s linear; 
-ms-animation: page 0.2s linear; 
-o-animation: page 0.2s linear; 
animation: page 0.2s linear; 
} 
.clear-shadow { 
clear: both; 
} 
.content { 
background: #fff; 
position: inherit; 
width: 82%; 
height: auto;
z-index: 5; 
overflow: hidden; 
box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.1); 
border-radius: 0 3px 3px 3px; 
} 
.content div { 
position: absolute; 
top: 0; 
padding: 10px 40px; 
z-index: 1; 
opacity: 0; 
-webkit-transition: all linear 0.3s; 
-moz-transition: all linear 0.3s; 
-o-transition: all linear 0.3s; 
-ms-transition: all linear 0.3s; 
transition: all linear 0.3s; 
} 
.content-1, .content-3 { 
-webkit-transform: translateX(-250px); 
-moz-transform: translateX(-250px); 
-o-transform: translateX(-250px); 
-ms-transform: translateX(-250px); 
transform: translateX(-250px); 
} 
.content-2, .content-4 { 
-webkit-transform: translateX(250px); 
-moz-transform: translateX(250px); 
-o-transform: translateX(250px); 
-ms-transform: translateX(250px); 
transform: translateX(250px); 
} 
.tabs input.tab-selector-1:checked ~ .content .content-1, .tabs input.tab-selector-2:checked ~ .content .content-2, .tabs input.tab-selector-3:checked ~ .content .content-3, .tabs input.tab-selector-4:checked ~ .content .content-4 { 
-webkit-transform: translateX(0px); 
-moz-transform: translateX(0px); 
-o-transform: translateX(0px); 
-ms-transform: translateX(0px); 
transform: translateX(0px); 
z-index: 100; 
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
filter: alpha(opacity=100); 
opacity: 1; 
-webkit-transition: all ease-out 0.2s 0.1s; 
-moz-transition: all ease-out 0.2s 0.1s; 
-o-transition: all ease-out 0.2s 0.1s; 
-ms-transition: all ease-out 0.2s 0.1s; 
transition: all ease-out 0.2s 0.1s; 
} 
.content div h2, .content div h3 { 
color: #398080; 
} 
.content div p { 
font-size: 14px; 
line-height: 22px; 
font-style: italic; 
text-align: left; 
margin: 0; 
color: #777; 
padding-left: 15px; 
font-family: Cambria, Georgia, serif; 
border-left: 8px solid rgba(63, 148, 148, 0.1); 
} 
@keyframes"page" { 
0% { 
left: 0; 
} 
50% { 
left: 10px; 
} 
100% { 
left: 0; 
} 
} 
@-moz-keyframes page { 
0% { 
left: 0; 
} 
50% { 
left: 10px; 
} 
100% { 
left: 0; 
} 
} 
@-webkit-keyframes"page" { 
0% { 
left: 0; 
} 
50% { 
left: 10px; 
} 
100% { 
left: 0; 
} 
} 
@-ms-keyframes"page" { 
0% { 
left: 0; 
} 
50% { 
left: 10px; 
} 
100% { 
left: 0; 
} 
} 
@-o-keyframes"page" { 
0% { 
left: 0; 
} 
50% { 
left: 10px; 
} 
100% { 
left: 0; 
} 
}

<section class="tabs"> 
<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" /> 
<label for="tab-1" class="tab-label-1">Трейлер</label> 
<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" /> 
<label for="tab-2" class="tab-label-2">Фильм</label> 
<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" /> 
<label for="tab-3" class="tab-label-3">Скрины</label> 
<input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" /> 
<label for="tab-4" class="tab-label-4">Рецензия</label> 
<div class="clear-shadow"></div> 
<div class="content"> 
<div class="content-1"> 
[xfgiven_treyler][xfvalue_treyler][/xfgiven_treyler]
</div> 
<div class="content-2"> 
[vkontakte-constructor]<center>{vkontakte-constructor}</center>[/vkontakte-constructor]
</div> 
<div class="content-3"> 
[xfgiven_skrinshoty][xfvalue_skrinshoty][/xfgiven_skrinshoty]
</div> 
<div class="content-4"> 
<p>[xfgiven_recenziya][xfvalue_recenziya]<[/xfgiven_recenziya]</p> 
</div> 
</div> 
</section>