div doesn't fit inside ul and li

Question

Possible Duplicate:
Why does overflow hidden stop floating elements escaping their container?

Why my div element has not been show inside my ul and li? Why my li is acting as inline element if I set that it is block? Take a look at this code: http://jsfiddle.net/jNkZP/

There fixed it for you: http://jsfiddle.net/jNkZP/24/ – PeeHaa Jul 03 '12 at 13:41 — PeeHaa, Jul 03 '12 at 13:41

Ayman Safadi · Accepted Answer · 2012-07-03T13:41:14.953

Your divs are floating inside the lis. When an element contains nothing but floating objects, it collapses. More eloquently put:

When a float is contained within a container box that has a visible border or background, that float does not automatically force the container's bottom edge down as the float is made taller. Instead the float is ignored by the container and will hang down out of the container bottom like a flag. Those familiar only with Explorer for Windows may scratch their heads and say "That's not right!" True, IE/Win does enclose a float within a container 'automatically', but only if the container element happens to possess the MS-only quality called hasLayout.

http://www.positioniseverything.net/easyclearing.html

Solution: Look into clearfix or any of its alternatives.

For example, I used overflow: hidden; to demonstrate my point: http://jsfiddle.net/jNkZP/23/

#QuadroEvento ul.ListaDadosEvento li{
    display: block;
    position: relative;
    background-color: #722827;
    outline: blue solid 1px;
    overflow: hidden;
}

score 0 · Answer 2 · answered Jul 03 '12 at 13:22

0

li cannot contain block element such as div, change it to span

<div class="QuadroPrincipal">
<div id="QuadroEvento">

    <ul class="ListaDadosEvento">
        <li>

                <span class="label">Descrição:</span>
                <span class="dados">@ev</span>

        </li>
        <li>
                <span class="label">Local:</span >
                <span class="dados">@ev</span >

        </li>
    </ul>
    </div>
</div>
</div>

answered Jul 03 '12 at 13:22

coolguy

7,866
9
45
71

1

`
` is a block element. As such, it **can** contain another block element such as a `
`. Whether or not you should is an entirely different story. But it **is** technically valid.

Ayman Safadi

Jul 03 '12 at 13:27

score 0 · Answer 3 · answered Jul 03 '12 at 13:34

replace with span

<div class="QuadroPrincipal">
<div id="QuadroEvento">

    <ul class="ListaDadosEvento">
        <li>

                <span class="label">Descrição:</span>
                <span class="dados">@ev</span>

        </li>
        <li>
                 <span class="label">Descrição:</span>
                <span class="dados">@ev</span>

        </li>
    </ul>
    </div>
</div>
</div>

remove float left from css

 #QuadroEvento ul.ListaDadosEvento div.label{
        text-align: right;
        font-weight: bold;
        min-width: 100px;outline: black solid 1px;
    }
    #QuadroEvento ul.ListaDadosEvento div.dados{
        padding-left: 5px;
        text-align: justify;
        outline: black solid 1px;
    }

div doesn't fit inside ul and li

3 Answers3