How to nurture html blocks in accordance to floated elements

Question

Issue#1:

Issue#2:

The question was asked before, but now with more description and relative code. In my blog I designed the <ul><li></li></ul> like:

.entry-content ul li{ margin-left: 20px; }

and styled <blockquote></blockquote> with FontAwesome icon like:

blockquote:before{
    content: "";
    font-family: "FontAwesome";
    left: -50px;
    position: absolute;
    top: -30px;
}

The <li> issues can be inspected directly at link#1 and the <blockquote> issue in link#2 (at the bottom of the page). In two of the cases the image block is defined with float:left.

The problem occurs when a float elements reside nearby, the object goes left or right, but the element can't understand to make its position afterwards, even the position: relative was set. You can see how the blockquote resides with a float element on the left.

How can I sort out the issue with a good visual look?

Answer 1

To fix your list items, bring the bullets inside:

ul { list-style-position: inside; }

Read more about list-style here.

To position your quote:

• Remove position:absolute, left and top

• Float it to the left

• Position as desired with margins

blockquote:before{
    font-family: 'FontAwesome';
    font-size: 3.125rem;
    color: #ccc;
    content: '\f10d';
    float: left;
    margin-top: -0.4em;
    margin-right: 0.2em;
}