How to make an expandable box with images and css

Originally written by James Richardson on 01/29/2009

This tutorial will cover the basics of how to make an expandable box in CSS. The advantages of using an expandable box are many. One is that when the browser window is restored down, the box will change its size to accommodate the browser window. Another is to make your website adjust to different monitor resolutions. These days, we are being bombarded with a large number of devices, and monitor innovations that web designers must adjust to. Many people are beginning to use handheld devices to view web pages and many LCD monitors are being sold that are widescreen and very high resolutions. Making a website elastic or fluid, so that it adjusts to a wide variety of user preferences, is becoming necessary. With that said, here we will learn how to build an expandable box, using plain CSS and HTML. You will need to download the following images in order to complete the tutorial. After you download the images, create a new HTML document and save it in the same location as the images.

Images:

Create the Box container

First we need to create a simple box container that we will use to hold all of the box data. You need to place the usual "style" tags in the head section and place the following code in the "style" tags. We will make a class called "box." This class will have the sizing of the box and the background color. I used the "min-width" and "max-width" for my box sizing. You can use percentages or em's or whatever you want. I chose the background color orange #ff9900. In the body section of your HTML document, you will need to place the "div" tags with the class "box." We will be placing all of our following code into this "div" tag.

Head

.box {
   max-width: 500px;
   min-width: 300px;
   background-color: #ff9900;
}

Body

<div class="box">

</div>	

Create the content area.

Next we need to create the content area on the box.. I used an H2 heading tag and a P paragraph tag and placed them in a div tag that has the class name "boxcontent." Zero the margin on the h2 tag so that the top of the box will not have a huge gap between the header and the top of the box. I chose to justify the paragraph; but, you can do whatever you want. The "boxcontent" class separates the content from the "box" container. This is so you can apply padding to the content, without affecting the top and bottom "div" tags we will soon place in the "box" container. The code below shows what the "boxcontent" should look like. You will place the "boxcontent" div tags inside the "box" div tags.

Head

.box h2{
   margin: 0px;
}
.box p{
   text-align: justify;
}
.boxcontent {
   margin: 0px;
   padding: 0px 20px 0px 20px;
}

Body

<div class="boxcontent">
    <h2 align="center">Expandable Box</h2>
    <p>This box was made by using CSS and HTML.  
    The purpose was to make a box that would expand to the browser window. 
    Simply make your images, code, and boom, your done.</p>
</div>

Create the top rounded corners.

Now we will create the top rounded corners by making two classes, "topright" and "topleft." The property in the "topright" will be background. the url(tr.gif) is the link to the image for the top right and will display as the background of the div tag. The "no-repeat" is necessary to keep the background from repeating. The top value will display the image at the top of the div tag and the "right" property will place the image to the right of the div tag. You will do the same thing for the "topleft"; except, the top left will have the width and height set to the image size, which is 15px X 15px and in the background property the position needs to be set to "left." In the body section, you need to make two div tags, one inside the other one, with the class names "topright" and "topleft." These two div tags will be place in between the "box" div tag and the "boxcontent" div tag.

Head

.topright { 
   background: url(tr.gif) no-repeat top right; 
}
.topleft { 
   background: url(tl.gif) no-repeat top left; 
   width: 15px;
   height: 15px;
}

Body

  <div class="topright">
  <div class="topleft">
  </div>
  </div>

Create the bottom rounded corners.

Finally the bottom rounded corners need to be made. This is exactly like the steps with the top div tags. These we will name "bottomright" and "bottomleft." These div tags will take the exact same parameters in the style that the "topright" and "topleft" did. The div tags created in the body section will be the same as well; except for their names of course, and will be places in between the ending "boxcontent" div tag and the ending "box" div tag.

Head

.bottomright {
   background: url(br.gif) no-repeat top right; 
}
.bottomleft {
   background: url(bl.gif) no-repeat top left; 
   width: 15px;
   height: 15px;
}

Body

  <div class="bottomright">
  <div class="bottomleft">
  </div>  
  </div>

The whole code

That's all you need to do and you will have a nice expanding box. Below is all of the code inside the appropriate HTML. You can copy and past this whole section into an HTML file and it will work for you. This concludes How to make an expandable box with rounded corners in CSS tutorial. For more information on CSS you can go to w3schools CSS references.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Rounded Expandable Box</title>
<style type="text/css">
.box {
   max-width: 500px;
   min-width: 300px;
   background-color: #ff9900;
}
.box h2{
   margin: 0px;
}
.box p{
   text-align: justify;
}
.boxcontent {
   margin: 0px;
   padding: 0px 20px 0px 20px;
}
.topright { 
   background: url(tr.gif) no-repeat top right; 
}
.topleft { 
   background: url(tl.gif) no-repeat top left; 
   width: 15px;
   height: 15px;
}
.bottomright {
   background: url(br.gif) no-repeat top right; 
}
.bottomleft {
   background: url(bl.gif) no-repeat top left; 
   width: 15px;
   height: 15px;
}
</style>
</head>

<body>

<div class="box">
  <div class="topright">
  <div class="topleft">
  </div>
  </div>
    <div class="boxcontent">
    <h2 align="center">Expandable Box</h2>
    <p>This box was made by using CSS and HTML.  
    The purpose was to make a box that would expand to the browser window. 
    Simply make your images, code, and boom, your done.</p>
    </div>
  <div class="bottomright">
  <div class="bottomleft">
  </div>  
  </div>
</div>	

</body>
</html>