Check out this CSS example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Jenware | Personalized Gifts</title>
<style type="text/css">
/* styles for navigation */
#nav {
background-color: #2322ff;
height: 3em;
width:70em;
}
#nav ul {
list-style:none;
margin: 0 auto;
}
#nav ul li {
font-weight: normal;
text-transform: uppercase;
float:left;
}
#nav ul li a {
display: block;
padding: .5em;
border: 1px solid #ba89a8;
border-radius: .5em;
margin: .25em;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="">House</a></li>
<li><a href="">Baby</a></li>
<li><a href="">More</a></li>
<li><a href="">About</a></li>
</ul>
</div>
<!-- end #content -->
</body>
</html>
This is how it looks like.
Now, let's compare the CSS behavior below:
}
#nav ul {
list-style:none;
margin: 0 auto;
float:left;
}
When using float: left;, the elements behave differently. The second CSS example causes the items to stack vertically instead of horizontally like in the first example.
This variation in behavior may result in confusion as to why the alignment changes between the two sets of CSS rules.