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 −


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

Live Demo

<!DOCTYPE html>
         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;
      <div class="mycontent">
            <h3>Simply Easy Learning</h3>
              <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>
           <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>
        <footer>Add the footer content here</footer>
Published on 01-Feb-2018 09:05:13