It is common to do entire web layouts using the float property:
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
div { border: 3px solid blue; } .clearfix { overflow: auto; } nav { float: left; width: 200px; border: 3px solid #8AC007; } section { margin-left: 206px; border: 3px solid red; } </style> <body> <div class="clearfix"> <nav> <span>Navigation</span> <ul> <li><a target="_blank" href="index.html">Home</a></li> <li><a target="_blank" href="../html_beg/prc.html">CSS</a></li> <li><a target="_blank" href="../html_beg/index.html">HTML</a></li> <li><a target="_blank" href="../html_beg/prj.html">JavaScript</a></li> </ul> </nav> <section> <span>Top Section</span> <p>Notice we have put a clearfix on the div container. It is not needed in this example, but it would be if the nav element was longer than the non-floated section content.</p> </section> <section> <span>Bottom Section</span> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.</p> </section> </div> </body> |
Notice we have put a clearfix on the div container. It is not needed in this example, but it would be if the nav element was longer than the non-floated section content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. |
