3 images in a row centered in container

center, css, html, image, positioning

Solution

CSS

.contain {
    max-width:960px;
    text-align:center;
}

.category {
   position:relative;
   display: inline-block;
   float:left;
   padding:10px;
}

HTML

<div align="center" class="category">
   <img src="gemstoneshomebutton.png" />
</div>
<div align="center" class="category">
   <img src="dichroichomebutton.png" />
</div>
<div align="center" class="category">
   <img src="filigreehomebutton.png" />    
</div>

Problem

CSS ``` .contain { max-width:960px; text-align:center; } .category { position:relative; display: inline-block; float:left; padding:10px; } .category2 { position:relative; display: inline-block; pading:10px; } .category3 { position:relative; display: inline-block; float:right; margin-right:50%; padding:10px; } ``` HTML ``` <div align="center" class="category"> <img src="gemstoneshomebutton.png" /> </div> <div align="center" class="category2"> <img src="dichroichomebutton.png" /> </div> <div align="center" class="category3"> <img src="filigreehomebutton.png" /> </div> ``` i am trying to align 3 images that are 309 px wide , by 111 px high inside a container div, and they don't align center and also the third image jumps down below the other two images. I've tried to adjust the width of the container and the 3 divs, I've tried tables and changing the width on the actual html with no success. This is my first time working with divs and i thought they would be easier, perhaps my math is off when assigning widths, or maybe I'm just structuring it all wrong.![here is an example of what i am trying to achieve, the three categories in the picture here.] http://i49.tinypic.com/2r2uqso.jpg any and all help would be appreciated.

Original source