Maximilian Kohl Maximilian Kohl - 3 months ago 11
Markdown Question

Insert linked picture next to text without line break-causing placeholder

On a Jekyll markdown post, I want to insert a picture (in below picture: red box) right next to a div (blue). In the below picture, the position of the red box is perfect. Important: The picture is linked to some text content in the div (here: "Text of red box"). But the way I do this, the box creates a placeholder in the blue div and causes early line breaks. How can I let the red box float next to the div at the height of the anchor in the text without creating the empty space in the div?

enter image description here

Here is the code:

The grapefruit (Citrus × paradisi) is a
<span class="sidenote">
<cite class="quelle"></cite>
<span>Text of red box</span>
</span>
subtropical citrus tree known for its sour to semi-sweet fruit. Grapefruit is a hybrid originating in Barbados as an accidental cross between two.
The grapefruit (Citrus × paradisi) is a subtropical citrus tree known for its sour to semi-sweet fruit. The grapefruit (Citrus × paradisi) is a subtropical citrus tree known for its sour to semi-sweet fruit.


And the css:

.icon-source:before, .sidenote > cite.quelle:before {
background-size: 45px 45px;
background-color: red;
position: relative;
right: -45px;
display: inline-block;
float: right;
padding-top: -15px;
width: 45px;
height: 45px;
content:"";
}

Answer

Apparently, margin-right: -90px; pushes the placeholder out of the div:

.icon-source:before, .sidenote > cite.quelle:before {
    background-size: 45px 45px;
    background-color: red;
    position: relative;
    right: -45px;
    display: inline-block;
    float: right;
    padding-top: -15px;
    width: 45px; 
    height: 45px;
    margin-right: -90px;
    content:"";
}

enter image description here