CSS list float left

Question

Not aligned, This is my code:

HTML:

    <li><div class="card">
        <img src="uploads/image/default_profile.jpg" width="195" height="260" />
        <p><strong>Dr./BGen. Antonio L. Tamayo</strong><br>
<strong>AFP, FPCHA, Ph. D</strong></p>
        <p>Chairman of the Board and CEO<br>
Founder, University of Perpetual Help System DALTA</p>
    </div></li>

    <li><div class="card">
        <img src="uploads/image/default_profile.jpg" width="195" height="260" />
        <p><strong>Daisy M. Tamayo</strong><br><strong>RN, MAN, Ph. D</strong></p>
        <p>Vice Chairman and Treasurer<br>
Co-Founder, University of Perpetual Help System DALTA</p>
    </div></li>

</ul>

CSS:

ul.card-wrap
padding: 0

li
    font-size: 16px
    display: inline-block

.card
    width: 195px

but when i put float: left on my CSS this happened:

it aligned but it got out of the container

ul.card-wrap
padding: 0

li
    float: left
    font-size: 16px
    display: inline-block

.card
    width: 195px

how can i fix this?

Try to look her: http://stackoverflow.com/questions/12871710/what-does-the-css-rule-clear-both-do — J. Petersen, Sep 30 '16 at 23:54

score 1 · Answer 1 · edited May 23 '17 at 12:15

1

you need clearfix with floats also float: left on the .card-wrap

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

read this clearfix

If you have the option always use flexbox

edited May 23 '17 at 12:15

Community

1
1

answered Sep 30 '16 at 23:52

Mehrad

1,495
14
22

score 1 · Answer 2 · answered Sep 30 '16 at 23:52

1

Add

li {
  vertical-align: top;
}

(and no float)

In your CSS, lis are defined as inline-blocks, which by default are vertically aligned to their baseline. This rule aligns them at their top.

answered Sep 30 '16 at 23:52

Johannes

64,305
18
73
130

CSS list float left

2 Answers2