Boxes

Web Design

by Arnold Kling

Boxes

Boxes help to separate blocks of content on web pages. This separation is accomplished using margin and border controls.

Here is CSS code that can be used to create a class for a box in the middle of a page with a bright red border:

.box_center{
margin-left: 10%;
margin-right: 10%;
width: 80%;
border: medium solid #ff0000;
padding: 2%;
}

Here is what happens when we invoke the class box_center. The box can include multiple paragraphs between the <div class = "box_center"></div> tags.

Create this box class on your style sheet and use it on an HTML page. Try experimenting with different amounts for the margin-right, margin-left, width, and padding. Observe what happens. We set the border style to solid. The default would be no border. Try that. Also, try other border styles, such as double and outset.

Sometimes, you want text to wrap around a box. It is important to set the width of the box to something well under 100%, so that there is room for the text to fill around it. Here is code for a floating box. Try it out and see what happens.

/* This is the CSS code.
We create a class called boxright and we give it the property of floating to the right. */

.boxright{
float: right;
padding: 2%;
width: 40%;
background: #33ffff;
border: thin solid blue;
margin: 1%;
}

<p>
We start with just an ordinary paragraph. We will insert a floating box to begin just underneath.</p>
<div class = "boxright">
<p>This is the text that will fall inside the floating box. It will be aligned next to the block that follows the </div> tag.
</p>
</div>
<p>
Now, we are back to normal text. However, when we look at the page on a browser, the floating box will appear on the right. This text will be wrapped around the floating box. When we have gotten past the floating box, we will once again expand to fill the entire width of the page.
</p>

Boxes are quite tricky. They require a lot of trial and error.

Page created by Arnold Kling. Last Modified July 18, 2001.