Float and Media Query Css Program
Float and Media Query Css Program
/FLOAT.html
/
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<link rel="stylesheet" href="float.css">
</head>
<body>
<div class="float">
<img src="a.png" alt="">
<h1> CSS FLOAT</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione amet eum
blanditiis illum molestiae nemo culpa officia doloribus quae atque quasi quia
harum, ex vitae totam, eaque obcaecati? Unde, odio! Lorem ipsum dolor sit amet
consectetur adipisicing elit. Quod numquam at quisquam reiciendis iste voluptate
molestias asperiores quaerat error, voluptatem eveniet veritatis ullam cupiditate
commodi, cum soluta aliquam eligendi, ipsum similique possimus? Officia quasi
quisquam totam similique quibusdam culpa asperiores id a atque labore, nam
aliquam accusantium perspiciatis voluptatem iusto, repellat quam praesentium.
Accusantium repudiandae amet hic perspiciatis vitae maxime ea possimus quaerat
maiores alias voluptatibus ducimus dicta odit saepe suscipit explicabo commodi,
veniam corrupti asperiores placeat quis debitis deserunt! Debitis atque quasi
dolorem nulla placeat sapiente, accusantium sit assumenda, molestias qui itaque
laudantium. Minus distinctio sunt magni obcaecati accusantium.</p>
</div>
<div id="float-example">
<h2> With clear</h2>
<div class="green">Green</div>
<div class="red">Red</div>
<div class="blue">blue</div>
<div class="Purple">Purple</div>
<div class="yellow">yellow</div>
<div class="brown"> Brown</div>
<div class="clearboth">
<p> hai all</p>
</div>
</div>
</body>
</html>
/* Float.css */
.float{
padding: 30px;
background-color:teal;
color: white;
}
OUTPUT:
2)Weblayout:
<!—weblayout.html -->
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<link rel="stylesheet" href="weblayout.css">
</head>
<body>
<div class="weblayout-example">
<h2 class="text-center"> Website Basic Layout</h2>
<div class="navbar"> navbar</div>
<div class="menu"> Menu</div>
<div class="content">Content</div>
<div class="sidebar">Sidebar</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
/* Weblayout.css */
.menu
{
background-color: tomato;
float:left;
width: 33.33%;
height: 200px;
}
.content{
background-color: aquamarine;
float:left;
width: 33.33%;
height: 200px;
}
.sidebar{
background-color: #ff9800;
float: left;
width: 33.33%;
height: 200px;
}
.footer{
background-color:#00bcd4 ;
clear: both;
}
OUTPUT:
3)MediaQuery:
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<link rel="stylesheet" href="MediaQuery.css">
</head>
<body>
<div class="counters">
<div> Css Course Series</div>
<div> Introduction to css</div>
<div> Differenet Types of CSS</div>
<div> Css Colors</div>
</div>
</body>
</html>
/* MediaQuery.css */
*{
font-family: 'Franklin Gothic Medium', 'Arial Narrow',
Arial, sans-serif;
}
body{
background-color: skyblue;
}
#leftsidebar {
float: none;
width: auto;
}
#menulist {
margin: 0;
padding: 0;
}
.menuitem {
background: #CDF0F6;
border: 1px solid #d4d4d4;
border-radius: 4px;
list-style-type: none;
margin: 4px;
padding: 2px;
}
<div class="wrapper">
<div id="leftsidebar">
<ul id="menulist">
<li class="menuitem">Menu-item 1</li>
<li class="menuitem">Menu-item 2</li>
<li class="menuitem">Menu-item 3</li>
<li class="menuitem">Menu-item 4</li>
<li class="menuitem">Menu-item 5</li>
</ul>
</div>
<div id="main">
<h1>Resize the browser window to see the effect!</h1>
<p>This example shows a menu that will float to the left
of the page if the viewport is 480 pixels wide or wider. If
the viewport is less than 480 pixels, the menu will be on
top of the content.</p>
</div>
</div>
</body>
</html>
6)Disadvantage of float:
<!-- floatbox.html -->
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<link rel="stylesheet" href="flexbox2.css">
</head>
<body>
<div class="container">
<h1> CSS Flexbox</h1>
<p> Flexbox is an css3 Layout module used to design responsive
layouts</p>
</div>
<hr>
<div class="flex-container">
<div>Box1</div>
<div>Box2</div>
<div>Box3</div>
</div>
</body>
</html>
/* flexbox.css */
body{
background-color:#2150F5;
color:#fff;
text-align: center;
}
.flex-container{
background-color: lightcoral ;
}
.flex-container >div
{
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
color:#000;
float: left;
Before:
After:
Flex:
.flex-container{
background-color: lightcoral ;
display: flex;
}