Hey there! I'm really struggling to position two elements, an aside and a section (I believe the use of these HTML5 elements is important for their content).
On this page Click Here, my goal is to keep the 'Locations' (Aside) element static on the left side of the container div. As for the 'Regions' (Section), I want it to stay on the right side of the page (aligned with the 'Locations' element) and when resized, I need it to remain on the right while decreasing in width, maintaining its current content display. I seem to have set up the inner divs correctly to display when reduced in size, but I can't figure out how to position it next to the 'Locations' element.
Please review the following markup:
<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>
...
</ul>
</aside>
<section id="regions">
<h4 style="text-align:left;">Asia</h4>
<div class="thumbcontainer">
<div class="thumb">
...
</div>
...
</div>
</section>
</div>
And here's the CSS:
.mainwrapper {
width: 90%;
margin: 130px auto 0;
text-align:center;
}
...
.thumb img {
border:0;
}
You can access the link again Here
Thanks so much for any assistance!