さて、私は必死に2つの要素、脇とセクションを配置しようとしています（これらのHTML5要素の使用はそれらが保持するものに関連していると思います）。
次のページについては、ここをクリックしてください。「場所」（脇）要素を静的にして、コンテナdivの左側にとどまろうとしています。「Regions」（セクション）については、ページの右側（「locations」要素と同じレベル）に配置したいのですが、サイズを縮小する場合は、右側に配置して縮小する必要があります。幅、中身は私が今どのように持っているかを示しています。縮小されたときにその中に含まれるdivが表示されている場所に正しく設定されているようですが、locations要素の次（レベル上）に配置できません。
次のマークアップを参照してください。
<div class="mainwrapper">
<aside id="locations">
<h4 style="border-bottom: 1px dotted #990000;">Locations</h4>
<ul>
<li>
<a href="recentwork.htm">
<span>Recent Work</span>
</a>
</li>
<li>
<a href="asia.htm">
<span>Asia</span>
</a>
</li>
<li>
<a href="australia.htm">
<span>Australia</span>
</a>
</li>
<li>
<a href="britisles.htm">
<span>British Isles</span>
</a>
</li>
<li>
<a href="europe.htm">
<span>Europe</span>
</a>
</li>
<li>
<a href="london.htm">
<span>London</span>
</a>
</li>
<li>
<a href="morocco.htm">
<span>Morocco</span>
</a>
</li>
</ul>
</aside>
<section id="regions">
<h4 style="text-align:left;">Asia</h4>
<div class="thumbcontainer">
<div class="thumb">
<a href="india.htm">
<img src="images/photo/tn/india.jpg" alt="India" width="310" height="207">
</a>
<h3>India</h3>
<p>Country Description</p>
</div>
<div class="thumb">
<a href="indonesia.htm">
<img src="images/photo/tn/indonesia.jpg" alt="Indonesia" width="310" height="207">
</a>
<h3>Indonesia</h3>
<p>Country Description</p>
</div>
<div class="thumb">
<a href="malaysia.htm">
<img src="images/photo/tn/malaysia.jpg" alt="Malaysia" width="310" height="207">
</a>
<h3>Malaysia</h3>
<p>Country Description</p>
</div>
<div class="thumb">
<a href="singapore.htm">
<img src="images/photo/tn/singapore.jpg" alt="Singapore" width="310" height="207">
</a>
<h3>Singapore</h3>
<p>Country Description</p>
</div>
<div class="thumb">
<a href="thailand.htm">
<img src="images/photo/tn/thailand.jpg" alt="Singapore" width="310" height="207">
</a>
<h3>Thailand</h3>
<p>Country Description</p>
</div>
</div>
</section>
</div>
そしてCSS：
.mainwrapper {
width: 90%;
margin: 130px auto 0;
text-align:center;
}
.mainwrapper h4 {
text-align:center;
padding-bottom: 5px;
color: #FFF;
border-bottom: 1px solid rgba(153,0,0,1);
font-size:16px;
font-weight:200;
letter-spacing: 2px;
text-transform:uppercase;
font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}
#locations {
background-color:rgba(26,26,26,0.8);
display:inline-block;
text-align:left;
width: 150px;
height:auto;
margin-top: 5px;
padding: 0 10px 0;
}
#locations ul {
list-style: none;
padding:0;
}
#locations li {
}
#locations li a {
text-align:left;
color:#FFF;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:12px;
font-weight:normal;
margin:0;
text-decoration:none;
}
#regions {
background-color:rgba(26,26,26,0.8);
display:inline-block;
vertical-align:top;
width: 90%;
margin-left: 20px;
margin-top: 5px;
padding: 0 10px 0;
}
.thumbcontainer {
display:inline-block;
width:100%;
}
.thumb {
background-color:rgba(18,18,18,0.8);
border:1px solid rgba(0,0,0,1);
margin:10px 2px;
display:inline-block;
vertical-align:top;
width: 310px;
height:270px;
}
.thumb h3 {
color: #FFF;
border-bottom: 1px solid rgba(153,0,0,1);
font-size:14px;
font-weight:200;
letter-spacing: 2px;
text-transform:uppercase;
font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
margin:0 8px 0;
}
.thumb p {
color:#FFF;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:11px;
text-align:left;
padding-left:8px;
}
.thumb img {
border:0;
}
ここでもう一度リンクを見つけてください
助けてくれてありがとう。