I'm facing some unusual issues while trying to float elements to the left. Even after attempting to clear it with the easy clearing method, I still can't seem to get it right. Can you spot any mistakes? My goal is to float the article element.
Here's the CSS code:
#main-wrap { margin: 0 auto; width: 960px; }
/* Navigation */
nav { background: #2f2f2f; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .4); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .4); box-shadow: 0 1px 0 rgba(255, 255, 255, .4);
float: right; width: 473px; }
nav ul { padding: 10px; }
nav ul li { display: inline; border-right: 1px solid #000; border-left: 1px solid #686868; margin: 0 -4px 0 0; padding: 0 14px 0 14px; }
nav ul li:first-child { border-left: none; }
nav ul li:last-child { border-right: none; }
nav ul li a { color: #fff; letter-spacing: 1px; text-shadow: -1px 0 1px #000; }
/* Logo */
#logo-wrap { background: url(../images/logo.png); display: block; position: relative; right: 156px; top: 2px; z-index: -1; height: 718px; width: 733px; }
/* Main Content */
article { float: right; width: 482px; }
The #logo-wrap consists of one large image.