teslariu

css float

Mar 29th, 2022
57
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Layout con CSS Float</title>
  8.     <style>
  9.         * {
  10.             box-sizing: border-box;
  11.         }
  12.         body {
  13.             font-family: Arial, Helvetica, sans-serif;
  14.         }
  15.  
  16.         header {
  17.             background-color: #666;
  18.             padding: 30px;
  19.             text-align: center;
  20.             font-size: 35px;
  21.             color: white;
  22.         }
  23.  
  24.         /* Creamos dos columnas/boxes FLOTANTES */
  25.         nav {
  26.             float: left;
  27.             width: 20%;
  28.             background: #ccc;
  29.             padding: 20px;
  30.             height: 250px;
  31.         }
  32.  
  33.         nav ul {
  34.             list-style-type: none;
  35.             padding: 0;
  36.         }
  37.  
  38.         article {
  39.             float: left;
  40.             padding: 20px;
  41.             width: 80%;
  42.             background-color: #f1f1f1;
  43.             height: 250px;
  44.         }
  45.         section::after {
  46.             content: "";
  47.             display: table;
  48.             clear: both;
  49.         }
  50.  
  51.         footer {
  52.             background-color: #777;
  53.             padding: 10px;
  54.             text-align: center;
  55.             color: white;
  56.         }
  57.  
  58.         /* Responsive layout */
  59.         @media (max-width: 600px) {
  60.             nav, article  {
  61.                 width: 100%;
  62.                 height: auto;
  63.             }
  64.         }
  65.  
  66.  
  67.     </style>
  68. </head>
  69. <body>
  70.     <header>
  71.         <h2>Lenguajes de programaciĆ³n</h2>
  72.     </header>
  73.     <section>
  74.         <nav>
  75.             <ul>
  76.                 <li><a href="#">HTML</a></li>
  77.                 <li><a href="#">CSS</a></li>
  78.                 <li><a href="#">PHP</a></li>
  79.                 <li><a href="#">JavaScript</a></li>
  80.             </ul>
  81.         </nav>
  82.         <article>
  83.             <h1>HTML</h1>
  84.             <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae placeat itaque sit minima asperiores, molestiae provident recusandae quos tempore veritatis ab officia et. Iste praesentium beatae tempore vero deserunt architecto!</p>
  85.             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit cumque optio aspernatur corporis error officia neque perferendis accusamus libero explicabo? Illum saepe esse veniam dolorem, quos quidem similique fugit sapiente.</p>
  86.             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quas facilis adipisci libero, asperiores officiis illo tempora ea maxime animi nulla autem commodi quibusdam neque quisquam obcaecati doloremque cum aperiam.</p>
  87.         </article>
  88.     </section>
  89.     <footer>
  90.         <p>Footer</p>
  91.     </footer>
  92.  
  93.  
  94. </body>
  95. </html>
RAW Paste Data Copied