dancemc15 dancemc15 - 2 years ago 74
HTML Question

How do I center my nav bar on its own line?


I'm trying to center my nav bar; however, my aside element keeps coming up in the same line as my nav bar. How can I fix this?

Thanks in advance!

#wrapper {
width: 600px;
margin: 0 auto;

#nav {
width: 500px;
margin: 0 auto;
list-style-type: none;
display: block;

#nav li {
float: left;

#nav a {
text-align: center;
text-decoration: none;
padding: 5px;

aside {
float: left;
padding: 5px;
height: 200px;
width: 100px;
display: block;


<ul id="nav">
<li><a href="#">About</a></li>
<li><a href="#">Writing</a></li>
<li><a href="#">Multimedia</a></li>
<li><a href="#">Resume</a></li>
<li><a href="#">Contact</a></li>


Answer Source

Updated Fidle

#nav li{
    display: inline-block;

Use "inline-block" instead "float"

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download