www. Expression-Web-Tutorial .com
Call 1.866.363.5633
www. Expression-Web-Tutorial .com
Call 1.866.363.5633
Have you ever wondered why you cannot place two divs side by side or left to right? Read over this article to understand why this is so, and what you can do about it.
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.)
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.
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.
There are two important characteristics of a Block Box that set it apart from an inline box:
1. 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.
2. 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 Expression Web. 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. Go ahead, add another div and take notice where it goes.... it can never sit next to the first div on the page UNLESS we apply some sort of positioning technique.
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. Simply apply the float property to one of the divs, then you should have no problem positioning divs side by side.
div {float:left;}
Floating elements on a web page is very important. We will float elements when making a Layout, a Horizontal Navigation Menu, to position images and wrap text around images, and in any situation that calls for positioning several block boxes on the same horizontal line.
A great way to learn about floating and other positioning techniques is by purchasing my DVDs for Beginners. You will learn how to make several layouts, all of which requires positioning with floats.
It is the CSS Float property that allows us to avoid the use of Tables!!
Inline or Line boxes flow left to right. An example would be an image, a hyperlink, and text within a paragraph.
Text within a paragraph: The paragraph tag is a block box but the text inside the paragraph flows left to right making it inline. Yet, we will style paragraphs as a whole, thus we will style paragraphs according to the Box Model.
Images, when inserted on a page and not in a paragraph tag, can be positioned left to right on the same horizontal Line.
Some form controls act like Inline Boxes, for instance, the Label.
While a Hyperlink by default generates an inline box, we can change it to a block box. We will need to do so when making certain types of navigation menus and buttons with CSS.
To change a block box to inline or inline to block, use the Display Property.
However, we don't want hyperlinks in our text to be changed to a block box. This will cause the hyperlink to stay on it's own line and force the rest of the text on the lines before and after it.
Example: Here is a paragraph from earlier that contains a hyperlink
Answer: We have to apply some type of Positioning Technique. I recommend using the Float property.
The hyperlink above is in its default state of Inline. But what if we changed it to block? See below.
Answer: We have to apply some type of Positioning
Technique . I recommend using the
Float
property.
Notice the hyperlink above was changed to block using the display property. We would never do this on purpose. But if you ever see your paragraph looking like this, then you know you should check the display property on you style sheets as something is inadvertently being applied to hyperlinks in your paragraphs.