Advanced Search

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.

Expand | Embed | Plain Text

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.