3つのdivを親のサイズに合わせて調整する（反応する）

Question

3つのdivを親のサイズに合わせてサイズを変更するにはどうすればよいですか？ page-wrapがメインのdivです。

[OK]を、ここでcodepen

#page-wrap { width: 960px; margin: 60px auto; } 

#map_canvas { width: 100%; height: 400px; width: 300px; float: left; position: relative; z-index: 30 !important; } 

#locations { list-style: none; width: 250px; float: left; } 

#more-info > div { background: #e9e2bf; -moz-box-shadow: 0 0 14px rgba(70,49,1,0.5); -webkit-box-shadow: 0 0 14px rgba(70,49,1,0.5); padding: 20px; height: 320px; } 

Answer 1

のコードが、これはおそらくパーセント幅（すなわち、幅= 33％）を使用したい

#page-wrap { 
 
    width: 100%; 
 
    margin: 60px auto; 
 
} 
 

 
#map_canvas { 
 
    width: 33.33%; 
 
    height: 400px; 
 
    float: left; 
 
    position: relative; 
 
    z-index: 30 !important; 
 
    box-sizing: border-box; 
 
} 
 

 
#locations { 
 
    list-style: none; 
 
    width: 33.33%; 
 
    float: left; 
 
    box-sizing: border-box; 
 
} 
 

 
#locations li { 
 
    width: 100%; 
 
} 
 

 
#more-info { 
 
    width: 33.33%; 
 
    box-sizing: border-box; 
 
} 
 

 
#more-info>div { 
 
    background: #e9e2bf; 
 
    -moz-box-shadow: 0 0 14px rgba(70, 49, 1, 0.5); 
 
    -webkit-box-shadow: 0 0 14px rgba(70, 49, 1, 0.5); 
 
    padding: 20px; 
 
    height: 320px; 
 
}