Структура с 3 DIVs

Question

Как выполнить следующую структуру?

Это то, что я до сих пор:

<style> 
div{ 
    border: 1px solid; 
} 
#d1{ 
    width: 200px; 
    height: 150px; 
} 
#d2{ 
    width: 200px; 
    height: 100%; 
} 
#d3{ 
    width: 100%; 
    height: 100%; 
} 
</style> 

<div id="d1"> 
1 
</div> 
<div id="d2"> 
2 
</div> 
<div id="d3"> 
3 
</div> 

Спасибо!

Answer 1

Вы можете сделать это, используя absolute позиционирование наряду с установкой top, bottomleft, и right по мере необходимости, как так:

CSS

#d1, #d2, #d3 { 
    border: 1px solid #000000; 
    position: absolute; 
} 
#d1 { 
    top: 0; 
    height: 150px; 
    left: 0; 
    width: 200px; 
} 
#d2 { 
    top: 150px; 
    bottom: 0; 
    left: 0; 
    width: 200px; 
} 
#d3 { 
    top: 0; 
    bottom: 0; 
    left: 200px; 
    right: 0; 
} 

Demo

Answer 2

Если вы можете изменить последовательность элементов, вы можете сделать:

* { line-height:16px; } 
    #i1 { margin:0 0 0 200px; background-color:#eef; } 
    #i2 { margin-top:-16px; width:200px; height:150px; background-color:#efe; } 
    #i3 { width:200px; background-color:#fee;} 

    <div id="i1">main right</div> 
    <div id="i2">left top</div> 
    <div id="i3">left bottom</div> 

Но, очевидно, это будет легче, если вы просто обернуть левую колонку в еще один DIV

<div id="left"> 
    <div id="i2">left top</div> 
    <div id="i3">left bottom</div> 
</div> 
<div id="main">main</div> 


#left {float:left; width:200px; margin:0;padding:0;} 
#main {margin-left:200px; } 
#i2 { width:200px; height:150px; } 
#i3 { width:200px; } 

UPDATE: говоря о высоте и ширине 100%; вы также можете использовать абсолютное позиционирование. Here is example