Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a floating Layout in HTML?
Layout make the web pages look better and arrange the visual elements on web page. It establishes the overall appearance of the web page.
The HTML Layouts specifies the arrangement of different components on a web page. There are many HTML elements that defines different section of a web page.
Following are the HTML elements used for HTML layout −
| S.No. | Attribute & Description |
|---|---|
| 1 | header It specifies a header for a section of the content on the web page. |
| 2 | section It represents a section of the content on web page. |
| 3 | nav It specifies a container for navigation links on a web page. |
| 4 | index It specifies additional information and is not always necessary to add on a web page. |
| 5 | aside It specifies the content aside from the content on a web page. |
| 6 | footer It specifies a footer for a section on a web page. |
Below are the CSS properties used for HTML web page layouts −
CSS float property
CSS flexbox
CSS framework
CSS grid
HTML tables
We use the CSS property float, to create a floating layout in HTML. Float property allows us to float an element left or right on the web page and allows text to wrap around the object (image or box). Float used to create layout for the web page.
Below are the attributes to the float property
left − The element is floated to the left side of the content on a web page.
right − The element is floated to the right side of the content on a web page.
none − The element is not floated.
Syntax
<style= “float:right”>
Example 1
Given below is an example to float element on a web page.
We can float image, text and other content on a web page.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h1><span style= "color: red;float:right">Mr. Bean</span></h1> <p> Mr. Bean is a British sitcom created by Rowan Atkinson and Richard Curtis, produced by Tiger Aspect and starring Atkinson as the title character. </p> <p> <img src="" style="float:left;width:80px;height:80px;"> Mr. Bean is a British sitcom created by Rowan Atkinson and Richard Curtis, produced by Tiger Aspect and starring Atkinson as the title character. </p> </body> </html>
Below is the sample HTML layout for a web page.
Example 2
Given below is an example for all different elements used for HTML layout.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .head{ font-size:17px; margin-left:10px; margin-bottom:15px; } body { margin: 0 auto; background-position:center; background-size: contain; } .menu { position:static; top: 0; background-color:skyblue; padding:10px 0px 10px 0px; color:white; margin: 0 auto; overflow: hidden; } .menu a { float: left; color: white; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 20px; } .menu-log { right: auto; float: right; } footer { width: 100%; bottom: 0px; background-color:slategrey; color: #fff; position: absolute; padding-top:20px; padding-bottom:50px; text-align:center; } .body{ margin-left:10px; } .aside{ right:inherit; float: right; width: 20%; } </style> </head> <body> <header> <div class="head"><h1><span style="color: red">NPTEL</span></h1> Online Learning Initiatives by IITs and IISc funded by MoE, Govt. of India</div> </header> <div class="menu"> <a href="#home">HOME</a> <a href="#course">COURSE</a> <a href="#help">HELP</a> <a href="#about">ABOUT</a> <a href="#settings">SETTINGS</a> <div class="menu-log"> <a href="#login">LOGIN</a> </div> </div> <div class = "body"> <section id="Content"> <h3>1.6 crore+ enrollments<br> 15 lakhs+ exam registrations<br> 4500+ LC colleges<br> 3500+ MOOCs completed<br> 60+ Industry associates</h3> </section> </div> <div class="aside"><aside>1.3 Billion+ views<br> 37 lakhs+ YouTube subscribers<br> 2300+ unique courses available for self study</aside> </div> <footer style="font-size: 20px">Documents Careers Help Videos Live Sessions Information on NPTEL semesters </footer> </body> </html>
Following is the output for the above example program.
Example 3
You can try to run the following code to create the above floating layout in HTML.
<!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>
2K+ Views
