Question

I realise this question has cropped up a few times here but I cannot seem to find a resolution to my specific problem. I am currently building a photography website, although taking me a long time, its coming along ok. I dont usually ask too many questions, instead searching for answers, but this one is driving me mad. I am very new to web building and consider myself a complete novice.

Now I have a main ‘Photo’ page that will link to galleries, in this page I will have large tumbnails with some fancy CSS3 effects on them.

In this page I have created 6 divs that will contain these large thumbnails, what I need them to do is reposition when the screen is reduced (Or displayed on smaller res displays etc) Now the img containers do in fact reposition when displayed on a smaller device but what I am struggling to achieve is keeping the 6 divs centered in the middle of the screen.

The last solution I tried was “display: inline-block” Also the containing div’s height does not seem to expand with the content. I guess there is a bit missing here so would appreciate any suggestions and help given.

I have not looked in depth into the footer issue yet but any help on that would also be great. The problem is that it was just positioned at the bottom of the page (What I though was sticky) but now that the page has enough content to scroll it just stays where it is.

Any other help and comments on the website as a whole are very welcome :o) Many thanks in advance!!

The page in question russfrancis.co.uk/photo

Please see the following markup and CSS:

Photo Markup:

<div class="photomain">
  <div class="containerwrapper">
    <div class="photoimgcontainer">
      <div class="view view-second">
        <img src="images/photo/tn/asialg.jpg" />
      <div class="mask"></div>
      <div class="content">
        <h2>Asia</h2>
        <p>In 2008 I spent 6 months backpacking around Asia.</p>
        <a href="asia.htm" class="info">View The Galleries</a>
      </div> <!-- Content Close -->
      </div> <!-- View-second close -->
    </div> <!-- Img Container Close -->
      <div class="photoimgcontainer">
      </div>
      <div class="photoimgcontainer">
      </div>
      <div class="photoimgcontainer">
      </div>
      <div class="photoimgcontainer">
      </div>
      <div class="photoimgcontainer">
      </div>
    </div> <!-- Container Wrapper Close -->
  </div>

CSS:

.photomain{
width: 90%;
height:auto;
margin: 130px auto 0;}

.containerwrapper{
display:inline-block;
height:auto;}

.photoimgcontainer{
background-color:rgba(19,19,19,1);
width: 535px;
height: 360px;
float:left;
margin: 5px 5px;}

Footer Markup:

<footer>
  <div class="footdiv">
    <p align="center">Follow Me</p> 
    <div class="footimg">
     <a href="https://www.facebook.com/RussFrancisPhotography" target="_blank"><img src="images/facebook.png" width="40" height="40" border="0" alt="RFP Facebook Page"></a>
     <a href="http://www.flickr.com/photos/russfrancisphotography/" target="_blank"><img src="images/flickr.png" width="40" height="40" border="0" alt="Russ Francis Flickr"></a>
     <a href="http://vimeo.com/lucidskies" target="_blank"><img src="images/vimeo.png" width="40" height="40" border="0" alt="Vimeo - Lucid Skies"></a>
     <a href="https://twitter.com/R_F_Photo" target="_blank"><img src="images/twitter.png" width="40" height="40" border="0" alt="Russ Francis - Twitter"></a>
    </div> 
 </div>
 <p class="pleft">&copy; Russ Francis Photography 2012</p>
 <div class="pright"><a href="#">Contact Me</a></div>
</footer>

Footer CSS:

footer {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFF;
position:absolute;
left: 0;
bottom: 0;
height: 115px;
width: 100%;}

.footdiv p {
padding-bottom: 10px;
border-bottom: 1px solid rgba(153,0,0,1);}

.footdiv {
margin: 0 auto 0;   
width:200px;
height:60px;}

.footimg {
padding-left: 14px;}

.pleft {
padding-left: 10px;
color:#999;
font-size:12px;
float:left;}

.pright {
font-size:15px;
padding-right: 20px;
float:right;}

.pright a {
color:#FFF;
text-decoration:none;}

Answer 1

remove bottom: 0; from the footer will be in bottom

footer {
    color: #FFFFFF;
    font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
    height: 115px;
    left: 0;
    position: absolute;
    width: 100%;
}

and

.containerwrapper {

    height: auto;
    margin: 0 auto;
    max-width: 1100px;
}

and just add the <div style="clear:both;"></div> just before the <footer >

output
dont consider the white line its because of the that there is tow image