Having trouble floating an unordered list? Check out this jfiddle example that aligns a list next to some text:
Here is the updated jfiddle link:
https://jsfiddle.net/8qzygaog/
I created a test document based on the example, but it's not working as expected. The list doesn't float in the correct position.
<!DOCTYPE HTML >
<html>
<head>
<style type="text/css">
#footer-left { float:left; width:17em; border:0; border-top:1px dotted #333; text-align:left; margin:0; padding:1.25em 0; }
.profile { width:1em; height:1em; margin-left:0.3em; }
#footer-left p { display:inline; font-size:.75em; color:#666; }
#footer-left ul { display:inline; margin:0; padding:0; float:left;}
#profiles li { list-style:none; float:left; }
</style>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
</head>
<body>
<div id="footer-left">
<p>E-mail me at <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb868a8287ab8a878e9389999e85858e99c5888486">[email protected]</a><br />or visit my profiles at <ul id="profiles">
<li><a href="http://www.facebook.com/alexbrunner" target="_blank"><img src="../images/icons/16/facebook_bw.png" class="profile" alt="Facebook" /></a></li>
<li><a href="https://plus.google.com/u/0/109422064867262895187/about" target="_blank"><img src="../images/icons/16/googleplus_bw.png" class="profile" alt="Google plus" /></a></li>
<li><a href="https://www.xing.com/profile/Alex_Brunner7" target="_blank"><img src="../images/icons/16/xing_bw.png" class="profile" alt="Xing" /></a></li>
<li><a href="http://at.linkedin.com/in/abrunner/en" target="_blank"><img src="../images/icons/16/linkedin_bw.png" class="profile" alt="Linkedin" /></a></li>
</ul></p>
</div>
</body>
</html>
Frustrating!