CSS Crosses

This page was created in response to a question by Paul Dean in the uk.net.web.authoring newsgroup. He wanted to display images within crosses, with text in the left and right arms of the crosses. A method of accomplishing this is shown below, and the code is listed below the example.

CSS crosses example

Text on the left of the cross

Text on the right of the cross

Text on the left of the cross

Text on the right of the cross

CSS crosses code

The code uses the following stylesheet:

.cross{
 float:left;
 margin:16px;
}
.crossCentre, .crossLeft, .crossRight{
  float:left;
  background-color:#ddf;
  border:1px solid #bbf;
}
.crossLeft, .crossRight{
  padding:16px;
  position:relative;
  top:64px;
  height:128px;
  width:48px;
}
.crossLeft{
  left:1px;
  border-right:none;
  padding-right:0;
}
.crossRight{
  left:-1px;
  border-left:none;
  padding-left:0;
  text-align:right;
}
 .crossCentre{
  padding:16px;
  background-color:#ddf;
  border:1px solid #bbf;
}

And the following HTML:

<div class="cross">
  <div class="crossLeft">
    Text on the left of the cross
  </div>
  <div class="crossCentre"><img src="example.png" width="128" height="256"
alt="Image in the centre of the cross"></div>
  <div class="crossRight">
    Text on the right of the cross
  </div>
</div>

clear:left; is used on the element following the crosses.