1-866-363-5633
www. Expression - Web - Tutorial .com


Expression Web Tutorials:  Learn How to Build Web Sites with CSS & HTML  ~  A Place For Beginners


HTML Box Generation & CSS Display Property

Generating Boxes

When we place a <div>, for instance, on a web page, it generates a long rectangular box on the page.  (The exact same thing happens if you write <div></div> in the code yourself....it generates a long rectangular box on the page.)

 

Not all Boxes Are Equal

While a <div> tag generates a long rectangular box, an <img> tag does not.  Instead, the <img> generates a line box, or more commonly referred to as an "Inline Box".  Hyperlinks also generate a Line Box by default. 

 

We are going to explore the differences between Block and Inline (or Line) Boxes for the remainder of this tutorial. 

Two Types of Boxes

1. Block Level Elements (such as the div), generate Block Boxes.

2. Inline Elements generate Inline Boxes.

This is so darn important!!  Please pay attention to this.  The type of box we are dealing with determines, in part, how we will position and format it.

Block Boxes are positioned and formatted according to the CSS Box Model.

Inline Boxes are positioned and formatted according to the Inline Formatting Model.

 

Block Boxes

A block box is a long rectangular box that takes up one entire line of a web page, regardless of the amount of content inside the box.  The next element added to the page will be Forced to begin on the next available line.

Example:  Place a div tag on a web page in EW3.  What do you see?  It's a Block Box that was created or generated from the tag.  It looks like a long rectangular box, and it extends across the web page or the box in which it's nested in.

**If you add another tag to the page, it will be forced to start on the next line below the first div, BUT never to the left or to the right of the div. 

Block Boxes Normally Flow top to bottom.

Since we cannot place two divs side by side, how the heck do we make columns out of divs!!! 

Answer:  We have to apply some type of Positioning Technique.  I recommend using the Float property.  See the Layout From Scratch Tutorial to learn how to float a div (when making columns).