Question

One for all you web designers…

I would like to display a character and indent a paragraph after it – just like in the diagram here:

http://dl.dropbox.com/u/43015072/indent.jpg

The trick is, I would like to do this without:

• Using a table
• Specifying a div height

The single character is rendered into an icon using an icon font (@font-face). Does anyone have any suggestions about how to go about doing this using only HTML + CSS?

Answer 1

I came out with this:

p {
    padding-left:20px; /* adjust it to your custom font needings */
    position:relative;
}
p:before {
    content: "x";
    font-family:Arial; /* add your custom font here */
    position:absolute;
    left:5px; /* adjust it to your custom font needings */
}

Live demo

---

If you actually need the borders, wrap the text in a span:

<p><span>Lorem ipsum dolor sit amet...</span></p>​

and add this rule:

p {
    /* same as before */
    border:1px solid red;
}
p span {
    display:block;
    border-left:1px solid red;
    padding-left:5px; /* or whatever you want */
}

Live demo