7.6.2. Clear

Well, wetalked about a lot of floating behavior, so there's only onemore thing to discuss. You won't always want your content toflow past a floated element -- in some cases, you'llspecifically want to prevent it.

If you have a document that is grouped into sections, you might not

Wednesday 22nd of February 2017 01:53:29 PM

Nice and Free CSS Templates

This site contains free css templates for your website - Just copy and paste and there you have a stunning website !

Menu und content
dynamic

Menu fixed, content
dynamic

Menu und content
dynamic

3 columns all
dynamic

4 columns all
dynamic

Menu floating

Menu fix, Inhalt u.
Head dynamic

3 columns fix
centered

dynamic mit
Head und Footer

fixed BOX centered

dynamic BOX
centered

fixed Box total
centered
Figure 8-60

Figure 8-60. Inline margins and line-box layout

8.4.3. Managing the Line Height of Inline Elements

In the previous section, we had a fewcases where changing the line-height of an inlineelement led to the possibility of text from one line overlappinganother. In each case, though, the changes were made on individualelements. So how can we affect the line-height of

Figure 9-22

Figure 9-22. Another approach to defining a "change bar"

Remember when we mentioned static-position muchearlier in the chapter? Here's one example of how it works andhow it can be very useful.

Another important point is that when an element is positioned, itestablishes a containing block for its descendantelements. For example, we could absolutely position an element andthen absolutely position one of its children, as shown in Figure 9-23.

right padding, they will be visible, as Figure 7-60 makes apparent.

B {padding-left: 10px; padding-right: 10px; background: silver;}
Figure 7-60

Figure 7-60. Padding on an inline element

Note the extra background space that appears on either end of the boldfaced text. There's your padding.

This all seems familiar enough, even when the boldfaced text stretches across multiple lines. Turn to Figure 7-61 margins, borders, and padding; styles can be applied within them, just as with any other element. This can make them very useful for the creation of sidebars, "sticky notes," and other such effects. One example is the ability to set a "change marker" on any paragraph that has been edited. This could be done using the following styles and markup:

SPAN.change {position: absolute; top: 0; left: -5em; width: 4em;
font-weight: bold;}

DIV {width: 400px;}
P {text-indent: 5%;}
<P>This paragraph is contained inside a DIV which is 400px wide, so the
first line of the paragraph is indented 20px (400 * 5% = 20).  This is because
percentages are computed with respect to the width of the parent element.</P>
Figure 4-7

Figure 4-7. Text-indenting with percentages

Note that this indentation will only apply to the first line of an element, even if you insert line breaks. Thus, as Figure 4-8 shows: