Video is not available... Embedded is previous playlist.
It is common to do entire web layouts using the CSS float property. Float is easy to learn - you just need to remember how the float and clear properties work. Disadvantages: Floating elements are tied to the document flow, which may harm the flexibility.
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Float Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body {font-family: Arial, Helvetica, sans-serif;}
/* Style the header */
header {background-color: #666;padding: 30px;text-align: center;font-size: 35px;color: white;}
/* Create two columns/boxes that floats next to each other */
nav {float: left;width: 30%;height: 300px;background: #ccc;padding: 20px;}
/* Style the list inside the menu */
nav ul {list-style-type: none;padding: 0;}
article {float: left;padding: 20px;width: 70%;background-color: #f1f1f1;height: 300px;}
/* Clear floats after the columns */
section::after {content: "";display: table;clear: both;}
/* Style the footer */
footer {background-color: #777;padding: 10px;text-align: center;color: white;
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {nav, article {width: 100%;height: auto;}
}
</style>
</head>
<body>
<h2>CSS Layout Float</h2>
<p>In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect (you will learn more about this in our next chapter - HTML Responsive.)</p>
<header>
<h4>G.S.S.S, KHOKHAR</h4>
</header>
<section>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<article>
<h1>GSSS KHOKHAR</h1>
<p align="justify">ਸਰਕਾਰੀ ਸੀਨੀਅਰ ਸੈਕੰਡਰੀ ਸਕੂਲ, ਖੋਖਰ ਸ੍ਰੀ ਮੁਕਤਸਰ ਸਾਹਿਬ 1964 ਈ. ਵਿਚ ਪ੍ਰਾਇਮਰੀ ਸਕੂਲ ਵੱਜੋਂ ਸਥਾਪਿਤ ਹੋਇਆ ਸੀ ਜੋ ਕਿ 2001 ਈ. ਵਿਚ ਅਪਗ੍ਰੇਡ ਕਰਕੇ ਸੀਨੀਅਰ ਸੈਕੰਡਰੀ ਸਕੂਲ ਬਣਾ ਦਿੱਤਾ ਗਿਆ. 2001 ਤੋਂ ਲੈ ਕੇ ਹੁਣ ਤਕ ਇਸ ਸਕੂਲ ਦਾ ਇਤਿਹਾਸ ਸ਼ਾਨਦਾਰ ਰਿਹਾ ਹੈ। ਅਕਾਦਮਿਕ ਖੇਤਰ ਤੋਂ ਲੈ ਕੇ ਖੇਡਾਂ, ਸਭਿਆਚਾਰਕ ਗਤੀਵਿਧੀਆਂ ਅਤੇ ਸਹਿ-ਵਿਦਿਅਕ ਗਤੀਵਿਧੀਆਂ ਵਿਚ ਇਸ ਸਕੂਲ ਨੇ ਸ਼ਾਨਦਾਰ ਪ੍ਰਾਪਤੀਆਂ ਕੀਤੀਆਂ ਹਨ.</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
