Image by B Tal via Flickr

Design your Web site using CSS content boxes

Design-your-Web-site-using-CSS-content-boxes

---

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

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

.

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.

So far we have some text in a

. 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:

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.

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.