Developer

Design your Web site using CSS content boxes

In this tutorial we show you how to use CSS content boxes to design your Web site.

Coloured content boxes are a great technique for creating visually-pleasing CSS layouts and content. All it takes is assigning a background colour to a <div> element or setting an image as the background if you want a sleeker look.

To begin create a <div> element and assign it an ID.

<div id='contentBox'></div>

We then need to define the styles for the contentBox ID. Let's start by setting the font type, size and colour.


#contentBox 
{
  font-family: sans-serif;
  font-size: 80%;
  color:# 2E2E2E;
}

Next we are going to add some filler text to the <div>.


<div id='contentBox'>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas  feugiat neque sit amet ante tincidunt hendrerit. Vestibulum eleifend erat  et enim. Cras nisi arcu, malesuada malesuada, accumsan non, venenatis  eget, purus. Mauris pulvinar tincidunt turpis. Aliquam enim. Vestibulum  tristique risus eget elit. Fusce urna arcu, dictum sit amet, luctus non,  bibendum eu, leo. Vestibulum at diam. Nunc pretium. Maecenas dapibus  laoreet leo. Mauris pretium quam. Nulla ultrices. Donec iaculis laoreet  diam. Suspendisse a felis quis mauris porttitor mattis. Duis aliquet  lacinia odio. 
</div>

So far we have some text in a <div>. Let's make this look more like a content box, by adding a background colour and a border around it. Add the code below to #contentBox.


background-color:#FFFF99;
border-style: solid;
border-width:2px;
border-color:#FF9933;

Set the width and height attributes of the box, like this:


width:20%;
height:35%;

We're going to add some padding around the text to make it look better.

padding:1%;

Our text fits nicely within the box at the moment, but if we added another paragraph it would flow over the box. To prevent this we need to add a scrollbar.

overflow: scroll;

Alternatively, you can set the overflow property to auto to display a scrollbar only when needed.

We're going to position the box 10 pixels from the start of the page:


position:absolute;
left:10px;

You can position the box anywhere on the page where you see fit, by adjusting the position attribute.

And tying it all in:


<html>
<head>
<title>Content Box</title>
<style type="text/css">
#contentBox 
{
  position:absolute;
  left:10px;
  font-family: sans-serif;
  font-size: 80%;
  color: #2E2E2E;
  background-color:#FFFF99;
  border-style: solid;
  border-width:2px;
  border-color:#FF9933;
  width:20%;
  height:35%;
  padding:1%;
  overflow: scroll;
}
</style>
</head>
<body>
<div id='contentBox'>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas  feugiat neque sit amet ante tincidunt hendrerit. Vestibulum eleifend erat  et enim. Cras nisi arcu, malesuada malesuada, accumsan non, venenatis  eget, purus. Mauris pulvinar tincidunt turpis. Aliquam enim. Vestibulum  tristique risus eget elit. Fusce urna arcu, dictum sit amet, luctus non,  bibendum eu, leo. Vestibulum at diam. Nunc pretium. Maecenas dapibus  laoreet leo. Mauris pretium quam. Nulla ultrices. Donec iaculis laoreet  diam. Suspendisse a felis quis mauris porttitor mattis. Duis aliquet  lacinia odio. </p>

<p>Nullam cursus erat id magna. Sed eget lectus. Phasellus dignissim. In  purus. Duis scelerisque. Sed suscipit risus nec velit. Sed et neque.  Maecenas eget nunc. Ut turpis tortor, varius ut, dapibus quis, lobortis 
et, erat. Aliquam vitae odio vitae tellus ultricies adipiscing. In ut  diam. </p>
</div>
</body>
</html>

This is how it will render in a browser:

If you want something a bit fancier, for example a content box with rounded edges you will need to use an image as the background. For this example we're going to use a simple rounded rectangular shape, like the one below.

Firstly, download the image or make your own.

Then, create a CSS document and enter the skeleton code for our example.


#contentBox {
{

#contentBox p {
}


We're going to specify how the content box and the text inside it should look .

To set the image above as the background, add the following code to #contentBox:


background-image: 
url('box.png');
background-repeat: no-repeat;
background-attachment: fixed;


We want the box to stay as it is, hence the no-repeat attribute. Also, to prevent it from scrolling with the text, we're setting its position to fixed.

Next enter the following code to position the <div>:


position:absolute;
left:4px;
top:2px;

Make the height and width of the <div> the same as that of the background image:


height:271px;
width:340px;

To make the box scrollable add:

overflow: scroll;

Now that we have the box set, let's define how the text inside it should appear.

To define the font, enter the following code to #contentBox p:


font-family: sans-serif;
font-size: 80%;
color:dark grey;

To make the text stay within the box and not flow outside, we need to add some margins:


margin-top:7%;
margin-left:5%;
margin-right:7%;

Putting the CSS code together:


#contentBox 
{
  background-image: 
  url('box.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  position:absolute;
  left:4px;
  top:2px;
  height:271px;
  width:340px;
  overflow: scroll;
}

#contentBox p
{
  font-family: sans-serif;
  font-size: 80%;
  color:dark grey;
  margin-top:7%;
  margin-left:5%;
  margin-right:7%;
}

The HTML code will look like this


<html>
<head>
<title>Content Box 2</title>
<link rel="stylesheet" type="text/css"
href="content_box2.css" />
</head>
<body>
<div id='contentBox'>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat neque sit amet ante tincidunt hendrerit. Vestibulum eleifend erat et enim. Cras nisi arcu, malesuada malesuada, accumsan non, venenatis eget, purus. Mauris pulvinar tincidunt turpis. Aliquam enim. Vestibulum tristique risus eget elit. Fusce urna arcu, dictum sit amet, luctus non, bibendum eu, leo. Vestibulum at diam. Nunc pretium. Maecenas dapibus laoreet leo. Mauris pretium quam. Nulla ultrices. Donec iaculis laoreet diam. Suspendisse a felis quis mauris porttitor mattis. Duis aliquet lacinia odio. </p>
<p>Nullam cursus erat id magna. Sed eget lectus. Phasellus dignissim. In purus. Duis scelerisque. Sed suscipit risus nec velit. Sed et neque. Maecenas eget nunc. Ut turpis tortor, varius ut, dapibus quis, lobortis et, erat. Aliquam vitae odio vitae tellus ultricies adipiscing. In ut diam. </p>
</div>
</body>
</html>

This is how the second example should display in a browser.

Browser Compatibility

The examples in this tutorial display correctly in Firefox 3.0b5, Safari 3.1, Opera 9.50 beta2 and IE8. Test them in other versions of the browsers and see what you get.

Now that you know how to make CSS content boxes, experiment with different colours and images until you get a look that will match your Web site.

Editor's Picks

Free Newsletters, In your Inbox