Aligning divs on one line using a floated left unorderd list


/ Published in: HTML
Save to your folder(s)

The css style's in the tags are important for this snippet to work.


Copy this code and paste it in your HTML
  1. <!DOCTYPE HTML>
  2. <html lang="en_US">
  3. <meta charset="UTF-8">
  4. <title>Aligning divs on one line using a floated left ul</title>
  5. <link rel="stylesheet" type="text/css" href="reset.css" media="all">
  6. <style type="text/css">
  7. ul li{
  8. float:left;
  9. }
  10.  
  11. ul li div{
  12. margin-right:15px;
  13. }
  14.  
  15. ul{
  16. list-style:none;
  17. }
  18. .one, .two{
  19. width:200px;
  20. height:200px;
  21. overflow:hidden;
  22. background-color:red;
  23. -webkit-border-radius:8px;
  24. }
  25.  
  26. </style>
  27. </head>
  28.  
  29. <div class="container">
  30. <ul>
  31. <li>
  32. <div class="one"></div>
  33. </li>
  34. <li>
  35. <div class="two"></div>
  36. </li>
  37. </ul>
  38. </div>
  39. </body>
  40. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  41. <script type="text/javascript" src="../js/pngfix.js"></script>
  42. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.