Question

Ok I am desperately trying to position 2 elements, an aside & a section (I think the use of these HTML5 elements are relevant for what they hold).

For the following page Click Here I am trying to get the ‘Locations’ (Aside) element to be static and stay on the left hand side of the container div. As for the ‘Regions’ (Section) I would like to have it stay on the right hand side of the page (on level with the ‘locations’ element) but when reduced in size I need it stay on the right and just reduce in width, with the contents inside displaying how I have it now. I seem to have set it up correctly in where the divs contained within it are displaying when reduced but am unable to position it next (On Level) to the locations element.

Please see 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>
      <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>

And the 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;
}

Please find the link again Here

Many thanks for any help.

Answer 1

Try this …

Remove position: fixed from HEADER, remove width: 90% from #regions and replace the .mainwrapper CSS declarations with this:

.mainwrapper {
    margin: 40px 2% 0;
    padding-left: 168px;
    position: relative;
    text-align: center;
}