www. Expression - Web - .com
CSS Tutorials
Video Tutorials
Training DVDs & Products
CSS Display Property: Box Generation
Block vs. Inline Boxes
Refers to the Display Property
The Display Property determines how HTML boxes will be generated.
Box Generation
Every time we place an HTML tag on a web page, it generates a box. In order to see these boxes, make sure Visual Aids are turned on. To do this, click View --> and hover over Visual Aids --> click on Show once to turn on all visual aids, and click on Show again to turn them off. (You can also choose to keep various visual aids turned on and others turned off.)
Likewise, every time we write the code for an HTML Element, it generates a box on the page.
Here's the point I'm making: There are 2 main types of boxes that can be generated. This is a very important point. Keep reading.
Two Types of Boxes
1. Block
2. Inline
1. 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.
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 <div> 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 <div> 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 cannnot 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).
Floating a div & the Impact on the NOrmal Flow
When we float a div, we are partially removing it from the normal flow of the page. What is the normal flow? Well, for block boxes, we said the normal flow is top to bottom, and any new element is forced to start on a new line. But, when we float a div (a block box), we remove that div from the normal flow, thus, the next element is not forced to start on the next line!! And we can now place two divs side by side as in creating columns.
Where is the float property located in the Style Builder?
Click on the Layout Category in the Style Builder and you will see the float property listed. Click on the drop-down menu next to the float property and you will see that we can float an element to the left of the right.
For an Example of using the Float Property, see the Layout tutorial where we make the columns.
We have to first learn the rules before we go breakin' the rules.
Example of a Block Box: Below you can see the div (container) extends all the way across the page, even though it has no content.
2. Inline Boxes (Line Boxes)
The second type of box that can be generated from particular HTML tags or elements is the Inline Box (or line box).
Inline Boxes flow left to right. They simply take up only as much room as needed, and allow the next inline box to sit to the right.
Examples: text in a paragraph or heading, images, hyperlinks <a>, certain form controls like the <label>.
For instance, let's take a look at a hyperlink that is within a paragraph.
For an Example of using the Float Property, see the Layout tutorial where we make the columns.
The hyperlink, Layout tutorial, is obviously Inline. How can you tell? It's in the left to right flow along with the rest of the text. If the hyperlink was a block box, it would look like this:
In the above example, you can see how the Hyperlink, if it were a block box, is on the line by itself because it forces the other elements to begin on the next line. A block box, by default, takes up the entire line. An Inline box does not.
Using the Display Property to Change the type of Box Generation
We can manipulate the type of box that is generated simply by using the Display property.
A classic example where we adjust the Display property is the hyperlink. Specifically, when we make certain types of navigation menus, we will change the hyperlink to a block box so that the entire box becomes clickable. However, we must use specific Descendant Selectors so that we don't screw up the hyperlinks within the text of the page.
Commonly used Display Values: block, inline, inline-block, none
More to come..... check back soon.