Question

Hey so I have a div containing 3 links which have a background url image making them appear as an image

Here is my css classes

    /* calculate button */
.fc-calculate {text-align: center; padding: 12px 0; display: }

.fc-calculate-button {margin: 0 auto; width:200px;}

.fc-calculate-button a {line-height: 21px; height: 21px; background: url(../../images/SOURCE/btn_grn_r.gif) 100% 0 no-repeat; width: auto; display: block; float: left; padding-right: 30px;}
.fc-calculate-button a span {display: block; float: left; background: url(../../images/SOURCE/btn_grn_l.gif) 0 0 no-repeat; line-height: 21px; height: 21px; padding-left: 12px; color: #fff;}

And mark up as follows

    <div class="fc-calculate">
    <div class="fc-calculate-button">
      <sc:link field="Link One" cssClass="">
        <span class="btnspan">
          <sc:text select="." field="Link One Text" />
        </span>
      </sc:link>
    </div>
    <!-- /fc-calculate-button -->


    <div class="fc-calculate-button">
      <sc:link field="Link Two" cssClass="">
        <span class="btnspan">
          <sc:text select="." field="Link Two Text" />
        </span>
      </sc:link>
    </div>
    <!-- /fc-calculate-button -->
</div>

The issue is that instead of the links appearing next to eachother and centered they are appearing beneath eachother

Answer 1

You’re floating your anchor and your spans but not your .fc-calculate-button class, if you want to display both containers side by side and center them on its container try this:

CSS

.fc-calculate {
    text-align:center;
}

.fc-calculate-button {
    display:inline-block;
    *display:inline; /* ie7 fix */
    zoom:1; /* hasLayout ie7 trigger */
}