HTML में फ्लोटिंग लेआउट कैसे बनाएं?

CSS float प्रॉपर्टी

फ्लोटिंग लेआउट वेबसाइट्स के लिए पारंपरिक मल्टी-कॉलम तरीका है। CSS float प्रॉपर्टी से एलिमेंट्स को बाएं/दाएं फ्लोट कराकर कॉलम्स बनाते हैं।

उदाहरण

<!DOCTYPE html> <html>
  <head>
    <style>
      div.mycontent { width: 100%; border: 1px solid green; }
      header, footer { padding: 1em; color: green; background-color: #FAFAFA; text-align: left; }
      nav { float: left; max-width: 150px; padding: 1em; }
      nav ul { list-style-type: none; padding: 0; }
      article { margin-left: 10px; border-left: 1px solid gray; padding: 1em; overflow: hidden; }
    </style>
  </head>
  </head>
  <body>
    <div class="mycontent">
      <header><h1>Tutorialspoint.com</h1><h3>Simply Easy Learning</h3></header>
      <nav>
        <ul>
          <li><a href="/tutorialslibrary.htm">Tutorials Library</a></li>
          <li><a href="/videotutorials/index.htm">Video Tutorials</a></li>
          <li><a href="/codingground.htm">Coding Ground</a></li>
          <li><a href="/tutor_connect/index.php">Tutor Connect</a></li>
          <li><a href="/online_dev_tools.htm">Tools</a></li>
        </ul>
      </nav>
      <article>
        <h1>About Us</h1>
        <p>This is demo content.</p><p>This is demo content.</p><p>This is demo content.</p><p>This is demo content.</p>
      </article>
      <footer>Add the footer content here</footer>
    </div>
  </body>
</html>