line of an affected element will be indented by 5% of the parentelement's width, as shown in Figure 4-7:DIV {width: 400px;}P {text-indent: 5%;}<P>This paragraph is contained inside a DIV which is 400px wide, so thefirst line of the paragraph is indented 20px (400 * 5% = 20). This is becausepercentages are computed with respect to the width of the parent element.</P>
Figure 4-7. Text-indenting with percentages
Note that this indentation will only apply to the first line of an
Tuesday 09th of February 2010 03:18:30 AM
left
#left {
position: absolute;
left: 2%;
width: 22%;
top: 106px;
background-color: #ffffff;
}
Attention
These pages use certain CSS definitions that are unsupported by older browsers.
more nice and free css templates


middle right
#content {
position: absolute;
left: 25%;
width: 50%;
top: 106px;
background-color: #ffffff;
overflow: auto;
}
overflow: auto;
With overflow: auto;
With overflow: you can determine how overflowing content should be treated.
Values
visible = The element gets expanded to show the entire content.
hidden = The content will be cut if it overflows.
scroll = The browser should offer scroll bars.
auto = The browser should decide how to render the element. Scroll bars are allowed.
Older browsers do not know support this property.
IE does not support overflow:visible
right
#right {
position: absolute;
left: 76%;
width: 22%;
top: 106px;
background-color: #ffffff;
overflow: auto;
}
open code
Use of this code encouraged! (o_.)/
Figure 7-37. Margins, backgrounds, and borders
The border's width is, by default, medium ,
as we can see in Figure 7-37. We can change that to
the result in Figure 7-38 as follows:
P {margin: 5px; background-color: silver;
border-style: solid; border-width: thick;}
Figure 7-38. Changing the width of the border
This can be taken to fairly ridiculous extremes, such as setting
20-pixel borders as depicted in Figure 7-39:
As Figure 6-29 demonstrates, the image is simplyrepeated along the y-axis (that is, vertically) from its startingposition -- in this case, the top left corner of the browserwindow.
Figure 6-29. Tiling along the vertical axis
In effect, there is a repeated column in the background, and there isonly one such column. Should you want two columns of symbols in thisexample, then the base image would have to be altered to containside-by-side symbols, as in Figure 6-30.