How to create a floating Layout in HTML?

HTMLWeb DevelopmentFront End Technology

To create a floating layout in HTML, use the CSS Float. Websites have multiple columns to show content. CSS Float is one of the ways to multi-column layouts.

Floating layout is commonly used for layout of websites. This is done using the CSS Float property.

Here’s the floating layout, which you can easily create −

Example

You can try to run the following code to create the above floating layout in HTML

Live Demo

<!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>
   <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>
raja
Published on 01-Feb-2018 09:05:13
Advertisements