HTML में एक फ्लोटिंग लेआउट बनाने के लिए, CSS फ्लोट का उपयोग करें। सामग्री दिखाने के लिए वेबसाइटों में कई कॉलम होते हैं। सीएसएस फ्लोट बहु-स्तंभ लेआउट के तरीकों में से एक है।
फ़्लोटिंग लेआउट आमतौर पर वेबसाइटों के लेआउट के लिए उपयोग किया जाता है। यह CSS फ्लोट प्रॉपर्टी का उपयोग करके किया जाता है।
यहां फ़्लोटिंग लेआउट है, जिसे आप आसानी से बना सकते हैं -
उदाहरण
आप 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>