HTML-এ ফ্লোটিং লে আউট তৈরি করতে CSS Float ব্যবহার করা হয়। ওয়েবসাইটে কন্টেন্ট দেখানোর জন্য একাধিক কলাম থাকে। CSS Float হলো মাল্টি-কলাম লে আউটের একটি পদ্ধতি।
ফ্লোটিং লে আউট ওয়েবসাইট লে আউটের জন্য সাধারণত ব্যবহৃত হয়। এটি CSS Float প্রোপার্টি ব্যবহার করে করা হয়।
এখানে ফ্লোটিং লে আউট দেওয়া হলো, যা আপনি সহজে তৈরি করতে পারবেন −
উদাহরণ
নিচের কোড চালিয়ে উপরের ফ্লোটিং লে আউট 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>
