CSS - одна коробка диктует высоту, другая ширина

Question

Что такое лучший способ иметь две дивы, слева и справа друг от друга, где один диктует ширину, а другой диктует рост:

CSS:

body 
{ 
    width:960px; 
    margin:auto; 
} 

.wholething 
{ 
    background-color:red; 
} 

.leftside 
{ 
    width:230px; 
    background-color:blue; 
} 
.rightside 
{ 
    height:640px; 
    background-color:green; 
} 

HTML:

<div class="wholething"> 
    <div class="leftside"> 
    </div> 
    <div class="rightside"> 
    </div> 
</div> 

результат будет выглядеть синей коробке 230px в ширину и 640 точек высокого и зеленое поле 730 точек в ширину и 640 точек в высоту. Затем, если CSS будет изменен для ширины или высоты, оба блока будут соответственно корректироваться. Пожалуйста, добавьте только в css; не удаляйте css, если это абсолютно необходимо.

Answer 1

body { 
    width:960px; 
    margin:auto; 
} 
.wholething { 
    background-color:red; 
    position: relative; 
    height: 640px; 
} 
.leftside { 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    bottom: 0px; 
    width:230px; 
    background-color:blue; 
} 
.rightside { 
    position: absolute; 
    left: 230px; 
    right: 0px; 
    top: 0px; 
    bottom:0px; 
    background-color:green; 
} 

Это будет работать. Однако вам нужно будет изменить left второго, чтобы соответствовать width первого.