need to get images displayed next to each other

Question

Hi I need to get these images to display next to each and stay inside the main-content div, heres the code...

HTML

<span class="images">
        <img id="gpu1" src="img/780.jpg">
        <div id="gpu1text">
            Nvidias last gen GPU's are going at a ridiculus price!
        </div>

        <img id="win8" src="img/win8.jpeg">
        <div id="win8text">
            Windows 8.1 going cheap due to the Windows 10 announcment!
        </div>

        <img id="win8" src="img/win8.jpeg">
        <div id="win8text">
            Windows 8.1 going cheap due to the Windows 10 announcment!
        </div>
    </span>

CSS

#gpu1 {
width: 200px;
height: 200px;
padding: 15px;
border: 2px;
border-color: #e2e2e2;
border-radius: 10%;
}

#gpu1text {
width: 200px;
padding-left: 15px;
}

#win8 {
width: 200px;
height: 200px;
padding: 15px;
border: 2px;
border-radius: 10%;
}

#win8text {
width: 200px;
padding-left: 15px;
}

.images {
display: inline-block;

}    

Thanks in advance I'm new to web development and this forum so sorry for any mistakes. Also I did look for other answer but the solutions didn't work for me.

Btw the two win8 images are just placeholders I will change the second one after, plus this is for a college assignment if anyone was wondering.

Answer 1

you need to encapsulate the whole html in to proper div, also once you do that you have to float left the block that holds the image and text for it. also give it a box sizing property to border box...

Also I cleaned up the unnecessary css for various ids... i changed it to class for reusability of code

the code snippet follows

.gpu1 {
  width: 100%;
  height: 200px;
  padding: 15px;
  border: 2px;
  border-color: #e2e2e2;
  border-radius: 10%;
  background: red;
  box-sizing: border-box;
}
#gpu1text {
  width: 100%;
  padding-left: 15px;
}
.images {
  width: 100%;
}
.block {
  background: #cecece;
  float: left;
  width: 200px;
  margin: 2px;
}

<div class="images">
  <div class="block">
    <img class="gpu1" src="img/780.jpg" />
    <div class="gpu1text">Nvidias last gen GPU's are going at a ridiculus price!</div>
  </div>
  <div class="block">
    <img class="gpu1" src="img/win8.jpeg" />
    <div class="gpu1text">Windows 8.1 going cheap due to the Windows 10 announcment!</div>
  </div>
  <div class="block">
    <img class="gpu1" src="img/win8.jpeg" />
    <div class="gpu1text">Windows 8.1 going cheap due to the Windows 10 announcment!</div>
  </div>
</div>

Hope this helps

Answer 2

You will need to modify your HTML structure a little bit by wrapping each instance of the image and the text inside another div and then set the display property of that div to inline-block. Doing that will successfully align all the images in one row.

Here's an example:

#gpu1 {
    width: 200px;
    height: 200px;
    padding: 15px;
    border: 2px;
    border-color: #e2e2e2;
    border-radius: 10%;
}
#gpu1text {
    width: 200px;
    padding-left: 15px;
}
.imageholder {
    display: inline-block;
    vertical-align: top;
}
#win8 {
    width: 200px;
    height: 200px;
    padding: 15px;
    border: 2px;
    border-radius: 10%;
}
#win8text {
    width: 200px;
    padding-left: 15px;
}
.images {
    display: inline-block;
}

<div class="images">
    <div class="imageholder">
        <img id="gpu1" src="img/780.jpg">
        <div id="gpu1text">Nvidias last gen GPU's are going at a ridiculus price!</div>
    </div>
    <div class="imageholder">
        <img id="win8" src="img/win8.jpeg">
        <div id="win8text">Windows 8.1 going cheap due to the Windows 10 announcment!</div>
    </div>
    <div class="imageholder">
        <img id="win8" src="img/win8.jpeg">
        <div id="win8text">Windows 8.1 going cheap due to the Windows 10 announcment!</div>
    </div>
</div>

jsFiddle Demo.

Answer 3

Check this code: http://jsfiddle.net/anc9uL7y/1

I have just encapsulated things a little and added the float: left property to the container divs.

HTML:

<div class="images">
        <div id="gpu1text" class="imageHolder">
            <img id="gpu1" src="img/780.jpg"/>
            <span>Nvidias last gen GPU's are going at a ridiculus price!</span>
        </div>


        <div id="win8text" class="imageHolder">
            <img id="win8" src="img/win8.jpeg"/>
            <span>Windows 8.1 going cheap due to the Windows 10 announcment!</span>
        </div>


        <div id="win8text" class="imageHolder">
            <img id="win8" src="img/win8.jpeg"/>
            <span>Windows 8.1 going cheap due to the Windows 10 announcment!</span>
        </div>
    </div>

CSS:

 #gpu1 {
    width: 200px;
    height: 200px;
    padding: 15px;
    border: 2px;
    border-color: #e2e2e2;
    border-radius: 10%;
    }

    #gpu1text {
    width: 200px;
    padding-left: 15px;
    }

    #win8 {
    width: 200px;
    height: 200px;
    padding: 15px;
    border: 2px;
    border-radius: 10%;
    }

    #win8text {
    width: 200px;
    padding-left: 15px;
    }

    .images {
    display: inline-block;
    }    
div.imageHolder {
    float: left;
}