An image keeps going below the rest of the images in a group div?

Question

I have a collection of images sorted into three groups; a group with all the images, a group with the first half of the images and a group of the second half of the images. I want to put the images in a line, but the last image keeps dropping to the bottom... how do I fit this is the same line?`

#firstlot {
  z-index: 10;
  position: absolute;
  left: 61%;
  top: 3.5%;
}
#secondlot {
  z-index: -5;
  position: absolute;
  left: 61%;
  top: 3.5%;
}
#home {
  width: 17.5%;
}
#home2 {
  width: 17.5%;
}
#thecoopertimes {
  width: 38.5%;
}
#thecoopertimes2 {
  width: 38.5%;
}
#aboutme {
  width: 25%;
}
#aboutme2 {
  width: 25%;
}
#contact {
  width: 21%;
}
#contact2 {
  width: 21%;
}

<div id="allbuttons">
  <div id="firstlot">
    <a href="http://www.coopertimewell.com/index">
      <img id="home" src="coopertimewell/buttons/home1.png" />
    </a>
    <a href="http://www.coopertimewell.com/thecoopertimes.html">
      <img id="thecoopertimes" src="coopertimewell/buttons/coopertimes1.png" />
    </a>
    <a href="http://www.coopertimewell.com/aboutme.html">
      <img id="aboutme" src="coopertimewell/buttons/aboutme1.png" />
    </a>
    <a href="http://www.coopertimewell.com/contact.html">
      <img id="contact" src="coopertimewell/buttons/contact1.png" />
    </a>
  </div>
  <div id="secondlot">
    <a href="http://www.coopertimewell.com/index">
      <img id="home2" src="coopertimewell/buttons/home22.png" />
    </a>
    <a href="http://www.coopertimewell.com/thecoopertimes.html">
      <img id="thecoopertimes2" src="coopertimewell/buttons/coopertimes22.png" />
    </a>
    <a href="http://www.coopertimewell.com/aboutme.html">
      <img id="aboutme2" src="coopertimewell/buttons/aboutme22.png" />
    </a>
    <a href="http://www.coopertimewell.com/contact.html">
      <img id="contact2" src="coopertimewell/buttons/contact22.png" />
    </a>
  </div>
</div>

I know when you look at the code you will say to make an unsorted list instead, but I'm doing it this way for a reason.

You should check your percents, #home 17.5% + #thecoopertimes 38.5% + #aboutme 25% + #contact 21% = **102%**. You also have some space in between your inline elements, so you should use inline-block or floating blocks. Take a look at [this Example](http://jsfiddle.net/1a64Lq58/) — skobaljic, Jan 22 '15 at 10:05

score 0 · Answer 1 · answered Jan 22 '15 at 09:53

0

The problem is that if you adds all the numbers % on your images, it provides over 100%. Then you have space between your images, which you should also take into account.

I have tried and it resolves itself when you corrects the numbers.

answered Jan 22 '15 at 09:53

multirose

56
4

score 0 · Accepted Answer · edited May 23 '17 at 11:50

It's because you have extra spaces in your code, check here : Removing whitespace between HTML elements when using line breaks

Thus you can remove them or give a smaller width for each elements.

Example, if you don't format the HTML you won't have your problem:

<a href="http://www.coopertimewell.com/index"><img id="home2" src="coopertimewell/buttons/home22.png" /></a><a href="http://www.coopertimewell.com/thecoopertimes.html"><img id="thecoopertimes2" src="coopertimewell/buttons/coopertimes22.png" /></a>

score -1 · Answer 3 · answered Jan 22 '15 at 09:52

-1

Please try a vertical-align:top; to all div that is getting aligned to bottom

answered Jan 22 '15 at 09:52

Sydonia

107
5

Sorry but I don't see how this can solve your problem. I've prepared a fiddle, I would be glad to see the solution in action : http://jsfiddle.net/fub3n07w/ – Michael Laffargue Jan 22 '15 at 10:01
Thanks, I still don't get how this could solve the OP problem which was the last image was going on a second line. Nothing to do with the alignement of the image in a vertical manner. – Michael Laffargue Jan 22 '15 at 10:39
try editing with the fiddle and remove vertical-align : top and see what happens then – Sydonia Jan 22 '15 at 10:41

An image keeps going below the rest of the images in a group div?

3 Answers3