CODEWITHSUNDEEP
htmlcss
Masao Liu
Masao Liu

Reputation: 769

List does not properly position around left floating fieldset

When fieldset floats left, the bullets of list items appear inside of fieldset. This unexpected effect is especially obvious with Opera:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>My title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        fieldset {
            width:50%;
            float:left;
        }
    </style>
</head>
<body>
    <fieldset>
        <legend>My Field Set</legend>
        field set <br />
        field set <br />
        field set <br />
        field set <br />
        field set <br />
        field set <br />
    </fieldset>
    surround surround surround surround surround surround surround surround surround surround surround 
    <ul>
        <li>first list
        <li>second list
    </ul>
</body>
</html>

For testing, I set fieldset to float:right, then list items seem to be properly positioned.

How do I fix it?

Upvotes: 0

Views: 42

Answers (1)

Youness
Youness

Reputation: 1495

Add this to the css : 

ul{
    float:left;
}

Upvotes: 1

Related Questions