Streaming live at 10am (PST)

How to add a drop cap


I wondered if anyone has any experience or idea how to create this drop cap affect as seen with the letter N on this page:

dropcap example

Thanks a lot


1 Like

Hi @GrahamCox :smile:

You could make a text block float left and put a single letter in it. Then style it to be huge. The put a paragraph block right next to it.

​Try these steps and let me know if you’re successful.

Hi @PixelGeek

Thanks very much, I’m almost there.

Here’s my share link:

I just need to get the second line of the paragraph to move right to be aligned with the top line of text, like it is on the dropcap example in my OP. I’ve tried using float right and clear for the paragraph but no joy. Any ideas/

Thanks again, I really appreciate your help.


Hi @GrahamCox, When you are trying to align two elements on the same line, remember that those two elements must equal 100% width :slight_smile: I would make the following updates:

First, adjust the drop cap as so:

Note the display inline block, float left and 8% width. I also gave the dropcap a relative postion with a 3px top offset to align better with the para text.

Next, adjust your content para element on the first paragraph. Add a subclass called “First” so that we can style this paragraph different than the others which have a width by default of 100%.

Notice also I have display inline block and float left on the “First” class on the paragraph, and a width of 92%. Now both elements together are 100% of the container width and appear on the same row :smile:

​I hope this helps. If not, please let me know – I’m happy to assist further! :slight_smile:



Hi @cyberdave

That’s done it! Thanks very much Dave for such a great explanation and support!


1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.