D. Shepherd D. Shepherd - 3 months ago 18
CSS Question

How to align items horizontally

Please help me put these boxes next to each other and not on top of each other. This should be so simple, but for some reason I am not able to figure it out.

https://jsfiddle.net/DShepherd79/6qsg8g1L/2/

<body>
<div class="horAlign">
<a class="rTableCell processMap"></a>
<a class="rTableCell sharepoint"></a>
</div>
</body>

.horAlign{
background-color:black;
width: 500px;
position: absolute;
}

.rTableCell{
padding:25px;
}

/*images Start Here*/
.processMap {
background:#08F80D no-repeat center;
display:block;
height:50px;
width:50px;
}

.sharepoint{
background-color:purple; no-repeat center;
display:block;
height:50px;
width:50px;
}

/*Hover Images Start Here*/
.processMap:hover {
background-color:red; no-repeat center;
}

.sharepoint:hover {
background-color:blue; no-repeat center;
}

Answer

Change display:block to display:inline-block

See https://jsfiddle.net/6qsg8g1L/3/