API tools faq
paste
Advertisement
Guest User

PayneLess Designs - Divs - Positioned Left and Right

a guest
Jul 11th, 2011
460
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.33 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html><head>
  3. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  4. <title>Divs - Positioned Left and Right</title>
  5. <meta name="description" content="">
  6. <meta name="keywords" content="">
  7. <meta name="date" content="2/7/2009">
  8. <meta name="author" content="Ron">
  9. <meta name="copyright" content="PayneLess Designs" />
  10. <!-- <link type="text/css" rel="stylesheet" href="css_styles.css"> -->
  11. <style type="text/css">
  12. * { margin: 0; padding: 0; border: 0; }
  13. body {
  14. font-size: 1em;
  15. text-align: justify;
  16. color: #000;
  17. background: #fff;
  18. }
  19.  
  20. div#wrap {
  21. width: 800px;
  22. height: 600px;
  23. margin: 0 auto;
  24. overflow: auto;
  25. border: 1px inset #000; /* Remove after tweaking */
  26. }
  27.  
  28. div#left {
  29. float: left;
  30. width: 400px;
  31. /* height: 600px; optional */
  32. padding: 5px;
  33. border: 1px inset #f00; /* Remove after tweaking */
  34. }
  35.  
  36. div#right {
  37. float: right;
  38. width: 240px;
  39. /* height: 600px; optional */
  40. padding: 5px;
  41. border: 1px inset #00f; /* Remove after tweaking */
  42. }
  43.  
  44. h1 {
  45. text-align: center;
  46. }
  47. </style>
  48. <!--[if IE: >
  49. <link rel="stylesheet" type="text/css" href="css_styles_ie.css">
  50. <![endif: -->
  51. </head>
  52. <body>
  53. <h1>Your Title Here</h1>
  54. <div id="wrap"><!-- START WRAP -->
  55.  
  56. <div id="left">
  57. <p>Left-side content:</p>
  58.  
  59. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at velit urna. In sollicitudin justo quis lorem mollis quis dictum neque auctor. Cras ut purus eget nunc ultricies mollis eu ac neque. Quisque vestibulum, massa et blandit faucibus, tellus mauris varius justo, et pretium nunc nunc interdum ante. Aenean adipiscing velit nec nunc interdum eu vehicula nunc laoreet. Pellentesque ut euismod erat. Donec id nisi dui. Phasellus vitae libero vel mauris rhoncus hendrerit. Nullam accumsan leo at tortor suscipit vitae posuere mi venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ultrices blandit interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  60.  
  61. <p>Cras tincidunt tincidunt egestas. Donec consequat tincidunt cursus. Morbi tincidunt odio non turpis volutpat sit amet volutpat metus euismod. Maecenas magna nunc, facilisis quis dapibus vel, feugiat ac orci. Curabitur in urna risus. In congue, felis a semper condimentum, metus erat vulputate metus, eget dignissim libero tellus a velit. Ut et leo tellus. Suspendisse a mi felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus porttitor nulla vitae risus porta eget rhoncus neque auctor. Mauris ac tempus quam. Donec at semper est. Curabitur at leo luctus nisl volutpat cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
  62. </div>
  63.  
  64. <div id="right">
  65. <p>Right-side content.</p>
  66.  
  67. <p>Fusce vulputate, nisi eget congue sagittis, mauris nibh condimentum felis, rhoncus dapibus lacus nisi quis lectus. Nulla aliquet urna eget sapien placerat varius. Quisque urna leo, scelerisque et condimentum varius, lacinia nec nibh. Suspendisse purus sem, auctor non varius in, rutrum a enim. Vestibulum tellus diam, posuere vel vestibulum vitae, lobortis ut est. Integer vitae purus diam, sit amet blandit lacus. Ut orci justo, rutrum vel congue a, vehicula id eros. Pellentesque a quam id nibh sollicitudin placerat at dignissim justo. Phasellus a magna quam, nec varius diam. Aliquam erat volutpat. Aenean a tempus felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla porta magna. Nunc feugiat pulvinar urna egestas bibendum. Quisque imperdiet sapien ac elit ultricies blandit ac et lorem. Morbi et sagittis mi. Maecenas scelerisque viverra nulla non molestie.</p>
  68.  
  69. <p>In egestas, urna non lobortis feugiat, nulla sapien aliquam tellus, non tincidunt erat lacus eu magna. Phasellus rhoncus dui vel eros scelerisque vulputate. Phasellus dignissim dui non mi pretium vel tempor erat tincidunt. Sed arcu eros, eleifend auctor tempor nec, malesuada a turpis. Nullam ut elit sem. Sed vel metus mauris. Nam id scelerisque lorem. Morbi non lorem id turpis tristique dapibus. Cras congue posuere sapien, vel porttitor diam accumsan eu. Sed sit amet dolor nisl, non tempor felis. Vivamus et turpis et nibh suscipit imperdiet. Vivamus laoreet, justo et molestie luctus, augue mauris tempor nibh, eget mollis nisi orci a felis. Quisque pulvinar auctor consequat.</p>
  70. </div>
  71.  
  72. </div><!-- END WRAP -->
  73. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!