Item Bullets Overlap Floating Elements Fix

Creative CSS floating issue fix on

by Kaloyan Kosev

HTML

<img src="https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-xfa1/v/t1.0-9/935066_139587472899548_1225457362_n.jpg?oh=1a18be1a982a4a11123b1bd08c10aa24&oe=556578F6&__gda__=1431764095_0e78ef8b2d4185da56753c866088e8fd" />
<ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni praesentium deserunt nam iste molestiae obcaecati expedita soluta officiis vitae!</li>
    <li>Tempora doloremque sit nulla consectetur atque, cumque, recusandae dolores ex nemo, blanditiis eveniet, commodi saepe ipsa reprehenderit. Expedita, animi, consectetur.</li>
    <li>Nesciunt et placeat dicta qui iure similique amet quia eligendi laboriosam totam doloribus aliquid, dolor aliquam accusantium eveniet vitae. Tenetur!</li>
    <li>Reiciendis tenetur obcaecati ipsa vel laborum, expedita ex iste nesciunt nam quia nulla alias illum velit! Quas rem, debitis eligendi!</li>
    <li>Doloribus eaque similique magnam tempora delectus recusandae et laboriosam repellat aut repellendus, maxime hic perspiciatis! Excepturi iste a fugit, quas?</li>
    <li>Culpa praesentium sit maxime reprehenderit, temporibus aliquid? Voluptatum, enim? Explicabo, laboriosam eaque, quaerat optio ipsum accusamus eos possimus tempore aut!</li>
    <li>Esse qui commodi unde, culpa quidem expedita quo aspernatur incidunt maxime quod ad sed eum eligendi nesciunt dicta quam debitis.</li>
    <li>Accusamus nesciunt sunt alias nisi voluptatum debitis voluptatibus ex velit adipisci delectus rem sapiente, magni architecto quisquam soluta suscipit minima!</li>
    <li>Eaque provident deserunt dicta earum maxime porro, sed voluptates error nulla iste nam cumque? Dolor omnis odio rem sint, deleniti.</li>
    <li>Corporis voluptas, asperiores dolor pariatur consectetur atque ipsa beatae! Nihil similique reiciendis sapiente, officia totam dignissimos rem expedita possimus fugit.</li>
    <li>Fugit dolorem animi, id voluptas iure odit consequuntur atque eligendi nulla blanditiis doloremque nesciunt sapiente at...

CSS

img {
    float: left;
}
ul {
    list-style: none;
    position: relative;
    padding-left: 0; /* remove any left padding */
    margin-left: 0; /* remove any left margin */
    left: 35px;
}
li {
    padding-left: 0; /* remove any left padding */
    margin-left: 0; /* remove any left margin */
    text-indent: -19px; /* adjust as much as needed */
}
li:before {
    content: '•\00a0\00a0\00a0';
    color: #000; /* bonus: you can customize the bullet color */
}