3 DIV внутри DIV (2 фиксированная высота)

Question

Прежде всего, извините за мой плохой английский

Мой код http://jsfiddle.net/WsN3b/1/

<div id="header"> 
</div> 
<div id="contentLeft"> 
</div> 
<div id="contentRight"> 
    <div id="Content1"> 
     Title 
    </div> 
    <div id="Content2"> 
     Image 
    </div> 
    <div id="Content3"> 
     legend 
    </div> 
</div> 
<div id="footer"> 
</div> 

Как вы можете видеть, "Content3" скрывается, потому что "Content2" занимает слишком много места

Мне нужно сделать мой div «Content2» автоматической настройкой и «Content1» и «Content2» взять размер своего контента.

Мое изображение должно занять все свободное место.

Я думаю, что я забыл что-то, чтобы заставить его работать, но я просто не могу найти его ...

Благодаря

EDIT:

----------------------------------- 
- Content 1      - 50px 
----------------------------------- 
-         - 
-         - 
-         - 
- Content 2      - 100% 
-         - 
-         - 
-         - 
----------------------------------- 
- Content 3      - 50px 
----------------------------------- 

Answer 1

Просто удалите дно для contentRight

#contentRight { 
    position: fixed; 
    top: 100px; 
    left: 0; 
    right: 60%; 
    background-color: #C63; 
    overflow:visible; 
} 

Смотреть это http://jsfiddle.net/BxPpY/

Answer 2

Да, если вы удаляете высоту # Content2, в это время высота будет автоматически регулироваться в зависимости от ее содержимого.

#header { 
position: fixed; 
top: 0; 
left: 0; 
right: 0; 
height: 100px; 
background-color: #abcdef; 
} 
#contentLeft { 
position: fixed; 
top: 100px; 
bottom: 100px; 
left : 40%; 
right: 0; 
background-color: #F63; 
} 
#contentRight { 
position: fixed; 
top: 100px; 
bottom: 100px; 
left: 0; 
right: 60%; 
background-color: #C63; 
} 
#footer { 
position: fixed; 
bottom: 0; 
left: 0; 
right: 0; 
height: 100px; 
background-color: #abcdef; 
} 

#Content1 { 
background-color: #cc3; 
} 

#Content2 { 
background-color: #bb6; 
} 

#Content3 { 
background-color: #ff3; 
}