Quoteblock border disappears


I’m currently using Jekyll to create my own blog, which renders Kramdown to html. And I found if I write this code:

![drunkbird](src){:  width="300px" style="float: left; margin-right:5%"} 

> A drunk man will find his way home, but a drunk bird may get lost forever.
> <cite>-- Shizuo Kakutani</cite> 

The border of quote block will disappear like below:

I’m new to html and not sure what happened and how to fix it. Any suggestion is highly appreciated. Thanks very much!

if you do it another way do you get a border?

it should just be css - look at it in Chrome’s Inspector and you can play with the css there and add that to your css.

Yes I can see a border if cite without adding an image. I define the css for quote block in this file as follows:

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
blockquote:before {
  color: #ccc;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;

I can’t see what’s wrong. I suspect it’s something related with image and text alignment.

Thanks for help, I replied as another comment.

It’s the CSS on the image. The image is floated to the left of the blockquote which is overlapping it some.

Yes you’re right! But it’s generated automatically from markdown to html. Unfortunately, I’m not familiar with html language. So what should I do to fix it? Thanks!

Hi all,

I fixed this problem by wrapping the quote block within a div which floats to right. Thank you all.