I'm trying to style a blockquote to look like this:
At the moment it looks like this:
(it is supposed to be without the white spaces at the beginning of the blockquote
My HTML/CSS
<blockquote><p>Lore ipsum...</p></blockquote>
blockquote {
margin: 1em 2em;
border-left: 1px solid #999;
padding-left: 1em; }
blockquote:before {
content: open-quote;
font-size: 6em;
line-height: 0px;
margin: 0px 5px 0px -40px;
vertical-align: bottom;
position: relative; left: -15px;
}
blockquote p:first-letter {
margin: .2em .3em .1em 0;
font-size: 220%;
}
/* without unnecessary font type/color attributes*/
I'm looking for something like position: relative; left: -15px;
, but it should work much more reliable than
this (more reliable means with different window sizes... oh and it should be pure css... ;-))
Do you know a solution problem that does not leave any unnecessary spaces behind?
float:left
.