3 column display with rounded borders using CSS

How to display rounded border images without using tables

This example uses a different technique to the previous page. Instead of using background images, this example floats the left and right border images into each corner.

Click here to see what the example looks like

To start, most browsers have some default margins, so the body is cleared of any margins and also padding. I don't know of any browser that has default padding, but it's included just in case.

body {margin: 0; padding: 0;}
#column-holder {margin: 0 10px;}

.leftbox {float: left; width: 160px; color: navy; background: white;}
.rightbox {float: right; width: 240px; color: navy; background: white;}
.centerbox {margin: 0 250px 0 170px; color: navy; background: white;}

.topborder {margin: 0 11px 11px 11px; border-top: 1px solid black;}
.content {border-left: 1px solid black; border-right: 1px solid black;}
.bottomborder {margin: 11px 11px 0 11px; border-bottom: 1px solid black;}

.floatleft {float: left;}
.floatright {float: right;}


How the columns work

• The column-holder ID gives the left and right page gaps of 10px.
• The leftbox and rightbox are floated accordingly, with their fixed widths in pixels.
• As these boxes are floated, whatever follows will sit over them.
• By setting the margin of centerbox to the widths of the other boxes (plus 10px extra for the gaps) the centerbox sits in between them.
• All columns now have a gap of 10px between them.

It's as easy as that, all done with floats and margins. Padding can be added to the content style as needed.

<div id="column-holder">
<div class="leftbox">
  <img class="floatleft" src="top_left.gif" width="12" height="12" alt="" />
  <img class="floatright" src="top_right.gif" width="12" height="12" alt="" />
  <div class="topborder"></div>
  <div class="content">L/H Content</div>
  <img class="floatleft" src="bottom_left.gif" width="12" height="12" alt="" />
  <img class="floatright" src="bottom_right.gif" width="12" height="12" alt="" />
  <div class="bottomborder"></div>
</div>

<div class="rightbox">
  <img class="floatleft" src="top_left.gif" width="12" height="12" alt="" />
  <img class="floatright" src="top_right.gif" width="12" height="12" alt="" />
  <div class="topborder"></div>
  <div class="content">R/H Content</div>
  <img class="floatleft" src="bottom_left.gif" width="12" height="12" alt="" />
  <img class="floatright" src="bottom_right.gif" width="12" height="12" alt="" />
  <div class="bottomborder"></div>
</div>

<div class="centerbox">
  <img class="floatleft" src="top_left.gif" width="12" height="12" alt="" />
  <img class="floatright" src="top_right.gif" width="12" height="12" alt="" />
  <div class="topborder"></div>
  <div class="content">Main Content Here</div>
  <img class="floatleft" src="bottom_left.gif" width="12" height="12" alt="" />
  <img class="floatright" src="bottom_right.gif" width="12" height="12" alt="" />
  <div class="bottomborder"></div>
</div>
</div><!-- close column-holder -->


How the borders work

• The top border corner images are floated left and right to their respective corners.
• This is followed by a topborder <div> which has a border-top style and some margin to stop it going right into the corners.
• As the 2 corner images are floated, the border-top style will sit on top of the images.
• The images all have a alt="" as recommended by the W3C. As they are just for decoration, they are left blank and are only really needed for validation purposes.
• The content <div> holds the border sides, and whatever else you may require, such as padding etc.
• The bottom border corner images are floated left and right to their respective corners.
• The bottomborder <div> has a border-bottom style. It needs the margin to push the border below the corner images, and to stop the border going into the corners.

As you will have noticed, the center column is actually last in the html, but displays in the middle, before the right column. It can be put first in the html with another technique using negative margins, but that will be for another page.

Download the example with the images Zipped Borders Example so you can try it locally on your computer.

If you wanted to, you could put the right hand column first in the html, and it would still work. This is sometimes useful as search engines will get this column's data first, and maybe index it better.