Forum Moderators: not2easy
I'm new around here and I've got a problem that has been driving me crazy...
here's my css:
body
{
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 62.5%;
}
#wrapper
{
background-image: none;
background-color: transparent;
margin-right: auto;
margin-left: auto;
width: 802px;
border: 1px solid silver;
height: auto;
font-size: 1.3em;
}
.banner
{
width: 800px;
}
ul li {
display:block;
float:left;
list-style-type:none;
}
And here is my html
<html lang="en">
<head>
<title>Test</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" title="css" charset="utf-8">
</head>
<body>
<div id="wrapper">
<div class="banner">
<img src="quay.png"></img>
</div>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="news.php">News</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Location</a></li>
<li><a href="contact.php">Contact Us</a></li>
</ul>
</div>
</body>
</html>
My stupid question is: Why do i get this result?
<snip>
(I know i shouldnt post urls but... how to explain without a picture?)
shouldnt my little navigation be inside the wrapper?
I would be greatly grateful forever and ever to the one(s) who show me the light.
Thx!
[edited by: swa66 at 3:11 pm (utc) on Nov. 13, 2008]
[edit reason] No URLs, describe it in words. [/edit]
shouldnt my little navigation be inside the wrapper?
The reason is that floated content is removed form the flow and hence parent should not expand to encompass them. Hence the <ul> should collapse (nothing but floated content in it), and the #wrapper div will not expand to contain it.
The easiest solution it to add something after the <ul> that is not floated and that is given the clear:left property (that way it'll stay below the floats and as long as you don't float it itself, it will cause it's parent to extend to encompass it.
