about


Scribe:

chrono

blog

Time

science!

book musings

gov

'punk

missle defense

jams

antiques

cultcha blog


Construct:

scripts & programs

on the town

snaps


Self:

creds (PDF)

key

missive


Making a Box for a Web Page

I needed to make a box on the right hand of my Web site, to hold some information. It turned out to be pretty easy: I used the CSS Box Model.

First, add the CSS box model specifications in the header of your html document:

<style type="text/css">
#box {
    width: 200px;
    height: 650px;
    float: left;
    margin: 1px;
    border-color: black;
    border-style: solid;
    border-width: 30 px;
	background-color: #F00; 
	padding: 1em 2em;
}
</style>
</head>

Note: You can also put them in a separate CSS stylesheet, but for simplicity's sake, we'll place it in the document this time around.

Then, add in the box where you need it in the HTML part of the document:

<div id="box">
Test in the box goes here.
</div>
</body>
</html>

I've shamelessly lifted these examples from a fine Tech Republic tutorial.

The full set of box model attributes can be found in W3C's specification. You can get quite fancy with placement, fonts and whatnot.

Now you'd think you could use "align" to put the box's "div" tag, right? Wrong! It's been deprecated. Use "float" and place it in the CSS spec instead.

Material taken from the CSS tutorial at W3Schools.