Scribd
Upload
6 views

Float and Media Query Css Program

The document contains multiple HTML and CSS examples demonstrating various web layout techniques, including CSS Float, Media Queries, and Flexbox. It showcases how to create responsive designs, manage layouts with floating elements, and implement media queries for different screen sizes. Additionally, it discusses the disadvantages of using float for layout purposes and introduces Flexbox as a more modern alternative.

Uploaded by

Candy Man
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Float and Media Query Css Program

The document contains multiple HTML and CSS examples demonstrating various web layout techniques, including CSS Float, Media Queries, and Flexbox. It showcases how to create responsive designs, manage layouts with floating elements, and implement media queries for different screen sizes. Additionally, it discusses the disadvantages of using float for layout purposes and introduces Flexbox as a more modern alternative.

Uploaded by

Candy Man
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

Float

/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;
}

.float > img{


float: right;
background-color: tomato;
padding:15px;
margin-left: 20px;;
}

#float-example > div{


text-align: center;
padding: 20px 0;
width: 100px;
color: white;
}
.green{
float: left;
background-color: green;
}
.red
{
float: left;
background-color: red;
}
.blue
{
float: left;
background-color: blue;
}
.Purple{
float: right;
background-color: purple;
}
.yellow{
float: right;
background-color: yellow;
}
.brown{
float: right;
background-color: brown;
}
.clearboth
{
clear: both;
}

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 */

.weblayout-example > div{


padding: 20px 0;
text-align: center;
margin: 5px 0;
}
.navbar{
background-color: teal;
}

.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:

<!-- MediaQuery.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="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;
}

@media screen and (max-width:900px) {


/* css code */
body{
background-color: lightcoral;
}
}

@media screen and(max-width:600px)


{
body{
background-color: lightgreen;
}

4)Sidebar using mediaquery:


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<style>
.wrapper {overflow: auto;}

#main {margin-left: 4px;}

#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;
}

@media screen and (min-width: 480px) {


#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px;}
}
</style>
</head>
<body>

<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;
}

You might also like