The Box Properties

---

Home/DHTML/CSS/Box Properties

Here are some explanations and examples of the css positioning and box properties. Use the links above to go straight to a certain category if you wish. Many of these do not yet work in Netscape. You may want to use IE4 to view the examples on this page.

Width and Height   Borders   Margins   Padding  

---

Width and Height

width

Possible Values:
number of pixels: {width:100px}
percentage: {width:25%}

The width property lets you define a width for a section of your page, such as a few sentences of text. If you set the width at 100 pixels, the text will wrap to the next line when it gets to a length of 100 pixels, much like a table:

<DIV style="width:100px">This section of text will be 100 pixels long</DIV>

This will give you the following:

As you can see, it cuts off much like a table cell does......but you won't have to worry about nested tables or 1x1 invisible images!

height

Possible Values:
number of pixels: {height:100px}
percentage: {height:25%}

The height property lets you give a section a specific height. If you set the height at 100 pixels, it should cut off the text after reaching a vertical length of 100 pixels, right? Well, it does....but you won't see it because by default everything is visible......

<DIV style="height:100px">This will<BR> have a<BR> height<BR> of 100<BR> pixels.</DIV>

Here you have the height set at 100, but even with all the line breaks, everything still shows up without a cut off:

So how do you know if the height property is really working? Well, if I were to fix it so that anything going past 100 pixels would not show up, we could see the height property work. So, I am going to use the overflow property. This is a property that lets us change what happens when something goes beyond our set width and height. I am going to set it to "hidden", so anything that goes beyond my 100 pixel cut off does not show up:

<DIV style="height:100px;overflow:hidden">This will<BR> have a<BR> height<BR> of 100<BR> pixels.</DIV>

Ah.....the text cut off after "100"! (You might even be able to see a tiny bit of the word "pixels" below it, if you have really good vision. I had to use a magnifying glass myself.....).

overflow

Possible Values:
visible
hidden
auto

When something has a width or height defined that is shorter than the element, this decides whether to hide the remaining part of the element, or show it. By default it is set to visible. But you can hide the overflow if you wish:

<DIV style="width:200px; overflow:hidden">
<NOBR>This just keeps going and going and going and going....</NOBR>
</DIV>

And anything beyond 200 pixels will be hidden! See how it cuts off below:

You could also make a scrolling area if you want to by setting it to "scroll"......

<DIV style="width:200px; overflow:scroll">
<NOBR>This just keeps going and going and going and going....</NOBR>
</DIV>

And you get this interesting little thing:

---

Borders

border-style

Possible Values:
none
solid
double

Oh yes, now we have borders too. The values above were the styles I was able to get to work so far, but there are supposed to be more....dotted, dashed, ridge, inset, outset, and groove. If you get one of those to work, let me know! The border-style lets you decide whether or not to show a border, and what style it should be if you use one. Setting this to "none" leaves no border, while the others will give you a border. Here is what the code for a solid border looks like:

<DIV style="border-style:solid">This will have a solid border.</DIV>

And you will get a long, solid border:

Why is the border so much longer than we need it to be? Because we did not define a width for the section of text we put the border around....Let's use the width property we learned earlier in this section:

<DIV style="width:200px; border-style:solid">This will have a solid border.</DIV>

And now we have a much better fit!

The "double" border style works the same way:

<DIV style="width:200px; border-style:double">This will have a double border.</DIV>

You get a nice little double border:

Oh, but now you want to change the border width itself....well read on below.....

border-width

Possible Values:
number of pixels
thin
medium
thick

This lets you decide how thin or thick your border will be. If you set the border-width to "thin", you will get a thin border:

<DIV style="border-width:thin; border-style:solid">This will have a thin, solid border.</DIV>

Now you have the nice thin border:

Of course, you can define the border-width in pixels as well:

<DIV style="border-width:12px; border-style:solid">This will have a thin, solid border.</DIV>

And now you have a 12 pixel border! Ouch!

border-color

Possible Values:
color name

You can also choose what color you want your border to be. By changing the border-color, you can use any color you like:

<DIV style="border-color:red; border-style:solid">This will have a red, solid border.</DIV>

Now you have a bright red border!

Now go color those borders!

---

Margins

margin-left

Possible Values:
number in pixels
percentage
auto

This lets you define a left margin for an element. It will always start from the left side of the screen. Here is a section of text with a border and a left margin:

<DIV style="margin-left:50px; border-style:double">This has a left margin of 50 pixels.</DIV>

You will get the following, 50 pixels from the left of the browser window:

This is pretty nice if you want to align a bunch of things down a certain part of the page......

margin-right

Possible Values:
number in pixels
percentage
auto

This is just like the margin-left, but it goes from the right side of the browser window:

<DIV style="margin-right:150px; border-style:double">This has a right margin of 150 pixels. Yes, it is pretty neat to have a right margin, isn't it?</DIV>

And you get this:

margin-top

Same as above, but defines the top margin. The default is 0.

margin-bottom

Same as above, but defines the bottom margin. The default is 0.

---

Padding

padding-left

Possible Values:
number in pixels
percentage
auto

The padding properties are much like the "cellpadding" property of a table, except these let you define the padding for the left, right, top, and bottom individually rather than all at once. Here is an example of the padding-left property:

<DIV style="padding-left:50px; border-style:double">This has a left padding of 50 pixels.</DIV>

And you will get the padding from the left inside the border:

padding-top

Same as above, but defines the top padding. The default is 0.

padding-right

Same as above, but defines the right padding. The default is 0.

padding-bottom

Same as above, but defines the bottom padding. The default is 0.

Well, that's the section on the box properties, at least for now. Let's go on to the next section: Using the Positioning Properties.

---

---

Other Topics: ASP/PHP | DHTML | Java

---

The tutorials and articles on these pages are © 1997-2010 by John Pollock and may not be reposted without written permission from the author, and may not be reprinted for profit. Disclaimer.

---