Floating drop caps are created with a relatively positioned left float. You place the relative float on the first letter of the first paragraph as an inline element like this: (span class="floatdcap">F(/span> so the drop cap is placed to the left of its parent paragraph aligned to the inside of the paragraph padding.
You can use margin-left and margin-right settings to adjust the placement of the drop cap horizontally and the top setting to adjust the placement of the drop cap vertically. The values you use for these settings depend on the font-size and font-weight and the overall look you want to achieve. These are the settings used to get the look for the drop cap at the beginning of the paragraph above:
*.floatdcap{float:left; position:relative; top: -7px;
margin-left:-3px; margin-right:3px; margin-bottom:-6px;
font-size:40pt; font-weight:bold; color:#00008b;}
This is how the drop cap looks with a border applied to the paragraph so you can see how it sits inside its parent with no top or margin settings.
border.gif
This is how the drop cap looks with left and right margin settings applied:
margins.gif
And here it is with the top setting applied:
top.gif
The margin-bottom setting determines how the paragraph text flows to the left below the drop cap. This is how it looks with margin-bottom:-6px followed by how it looks with margin-bottom:6px.
minus6.gif
plus6.gif
This drop cap adds styling to the hanging indent so the drop cap has a background and dotted line border. Below are its styling settings, which are similar to the example above with the addition of padding, background-color, and border settings.
*.styledindent{float:left; position:relative; top:-7px;
margin-left:-3px; margin-right:3px; padding:2px;
font-size:20pt; font-weight:bold; color:#ffffff;
background-color:#00008b;; border:3px dotted #999999;}
The best way to see how the padding, background-color, and border settings affect the look is to change them and see what happens. Basically, the padding setting adjusts the amount of space around the drop cap. The background-color fills the float area and the border applies a dotted line that sits inside the four edges of the float.
A marginal drop cap is used when you do not want the text to wrap to the left and under the drop cap. The styling is applied to the first letter of the first paragraph as an inline element the same way the floating drop cap is applied. This kind of drop cap has styling to indent the paragraph, and styling applied to the letter that moves the drop cap into the left margin. Here are the style settings for the marginal drop cap at the beginning of this paragraph:
*.indented{position:relative; margin-left:40px; margin-top:10px;}
*.margindcap{position:absolute; left:-40px; top:-4px;
font-size:40px; font-weight:bold; color:#00008b;}
The indented style creates a relatively positioned margin that is 40px wide with a 10px top margin so it renders 10px below the heading above it. The margin is relatively positioned so its settings do not affect the positioning of the drop cap. The drop cap is absolutely positioned so it appears in its normal position in the flow without affecting the positioning of the paragraph to its right.
This figure showing a border around the drop cap and around the paragraph should help you visualize the relationship of the drop cap to the paragraph:
marginborder.gif