HTML এ একটি ফ্লোটিং লেআউট তৈরি করতে, 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> 