CODEWITHSUNDEEP
css
user1716672
user1716672

Reputation: 1073

List content being ignored

I have a list of calendar events. The html looks like this:

   <li data-id="1">
        <a href="#calendar-item/1">
            <div class="calendar" style="">
                    <div class="calendar-header"></div>
                    <div class="calendar-month">Dec</div>
                    <div class="calendar-day">11</div>
            </div>               
            <p>Parents Association Non-Uniform Day</p>
            <span class="chevron"></span>
        </a>
    </li>

I have given the list item padding, but it is ignoring the content of the div tag, see the image:

enter image description here

Here is the jsfiddle.

Upvotes: 0

Views: 33

Answers (2)

Ravi Gadhiya
Ravi Gadhiya

Reputation: 390

Try this my be slow your problem

CSS

give flot:left in below class

li p:nth-of-type(1) {float:left;}

And give flot:left in below class

li{float:left;}

Upvotes: 0

Ria Weyprecht
Ria Weyprecht

Reputation: 1275

works in firefox for me but you defenitely need to clear your float. The easiest way to do that is using overflow: hidden on the list item so it takes the space of the floating icon and wraps its padding around that instead of just the text next to it

Upvotes: 1

Related Questions