Unordered list not staying inside div

HTML & CSS
1

For some reason, once I added the <p> around each link inside the <li>s, they dropped below the div, outside the div.

http://www.sss.com/post/uldiv.jpg
I highlighted the div in green. Notice how all the list items are now outside that div instead of inside.

Here’s the code:

#landingPageTopNav
{
	border-bottom: 1px solid #b7b5b5;	
}

#landingPageTopNav li
{
	float: left;
	display: inline;
	vertical-align: bottom;
	text-align: left;
	margin: 0px 10px 0px 0px;	
}

<div id="landingPageTopNav">
	<ul>
		<li>
			<p><a href="xxx">Home</a></p>
		</li>
		<li>
			<p><a href="xxx">Traditional</a></p>
		</li>
		<li>
			<p><a href="xxx">Whimsical</a></p>
		</li>
		<li>
			<p><a href="xxx">Tropical</a></p>
		</li>
	</ul>
</div>
2

The problem is the paragraphs, you cannot have P tags inside LI elements, it is as simple as that. :slight_smile:

3

When the list item is a block level (as this one is) you can have a p tag in it.
I see no reason for p tags in this case though. If the problem occurred after you placed the p tags in there it is more than likely some default p margins causing problems. Hard to tell though without all your code, where are the UL styles?

4

You are entirely correct but I was going on the above example (rather than going by as you mentioned a block level list) as it would be semantically incorrect to use paragraph tags on a list which is clearly being used for an inline navigation list (sorry I wasn’t explicit enough). :slight_smile:

5

I do not see any attempt to cause the ul to enclose its float children. The ul should expand to enclose the list items, including the li’s child p element and its margins, etc.

The <! element li - o %flow* – list item –> in the DTD indicates that the list item may contain zero or more of any element of type “flow”, i.e. any element defined as %block or %inline.

cheers,

gary

6

So was I, the floats automatically convert the list items to blocks and override that inline display below. :slight_smile:

7

weird, ok. So I removed the <p> and the links fell back into the div. Now you are saying because they <li> are floated, it makes them block level and the <p> tags and content within should be fine and show up inside the div? Well then I guess I still wonder why they are not when I throw back in the <p> tags such as in my example.

Thanks…

8

Now you are saying because they <li> are floated, it makes them block leveland the <p> tags and content within should be fine and show up inside the div?
Yes, that is what I am saying.

Well then I guessI still wonder why they are not when I throw back in the <p> tags such as in my example.
Probably because you are not containing your floats within the UL, Gary mentioned it in his post also. I have asked to see your UL styles but have I have not seen them yet. The code you posted just gave the li styles.

I suspect that you did not remove the default margins from your p tags, when that is done it works fine. But as I mentioned I see no reason for you to need p tags in this situation when the anchor can style the text. I left the p tag there to show you that it is possible.

Here is a working example with the needed UL styles to contain the floats-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo</title>
<style type="text/css">

#TopNav{
    list-style:none;
    margin:0;
    padding:0;
    border: 1px solid green;
    [COLOR=Blue]overflow:hidden;/*contain the floats*/[/COLOR]
}
* html #TopNav {[COLOR=Blue]height:1%[/COLOR]; overflow:visible;}/*[COLOR=Blue]haslayout for IE6[/COLOR]*/

#TopNav li{
[COLOR=Blue]    float: left;
    height:2em;
    line-height:2em;[/COLOR]
    text-align: left;
    margin: 0px 10px 0px 0px;    
}
#TopNav li a{
    [COLOR=Blue]float: left;[/COLOR]
    padding:0 .5em;
    background:#CCC;
    text-decoration:none;
}
[COLOR=Blue]p {margin:0; padding:0;}[/COLOR]
</style>
</head>
<body>

    <ul id="TopNav">
        <li><p><a href="xxx">Home</a></p></li>
        <li><p><a href="xxx">Traditional</a></p></li>
        <li><p><a href="xxx">Whimsical</a></p></li>
        <li><p><a href="xxx">Tropical</a></p></li>
    </ul>

</body>
</html>