CSS Gallery/thumbnail alignment issue

programming web dev
1

Hi all, I am trying to create a simple thumbnail gallery but Im have a small issue, everytime you click on the thumbs under the identity banner the web banner moves.

I have attached the CSS and HTML, I know that creating a seperate div for each heading is bad practise.

Cheers

Deringer

CSS


div.wrapper
{
width:470px;
height:305px;
float:left;
}
div.text
 {
text-align:left;
padding:5px;
}
div.img
  {
  margin: 20px;
  height: auto;
  width: auto;
  float:left;
  padding:0px;
  text-align: left;
  border:1px solid grey;
  }
div.img img
  {
  display: inline;
  margin: 0px;
  border: 1px solid #ffffff;
  }
div.img a:hover img
  {
  border: 1px solid #0000ff;
  }

HTML


<div class ="wrapper"><div class ="text"><p><b>Identity</b></p></div><div class="img">  <a target="_blank" href="images/RIproducts.jpg">  <img src="images/galthumb1.gif" alt="thumbnail" width="50"  height="50" />  </a></div><div class="img">  <a target="_blank" href="images/">  <img src="images/galthumb2.gif" alt="thumbnail" width="50"  height="50" />  </a></div><div class="img">  <a target="_blank" href="images/">  <img src="images/galthumb3.gif" alt="thumbnail" width="50"  height="50" />  </a></div><div class="img">  <a target="_blank" href="images/">  <img src="images/galthumb4.gif" alt="thumbnail" width="50"  height="50" />  </a></div><div class="img">  <a target="_blank" href="images/">  <img src="images/galthumb5.gif" alt="thumbnail" width="50"  height="50" />  </a></div><div class ="text"><p><b>Web Design</b></p></div><div class="img">  <a target="_blank" href="images/">  <img src="images/galthumb6.gif" alt="thumbnail" width="50"  height="50" />  </a></div></div>