Float and Clear

The float specifies the position of an element and whether it should float left or right.

If you want to float a paragraph to the left the command is:

p{

float:left;

}

If you wish to float it to the right:

p{

float:right;

}

By adding the width, the float will also fit to that particular percentage of the page. So if you add  “width:50%;” to the code, it will give the two floats half of the page each.

Here’s an example.

HTML Code:

<html>

<header>

<link rel=”stylesheet” href=”Style2.css” type=”text/css” />

<h1>
</h1>

<h2>
Hello my name is Thea.
</h2>

</header>

<body>

<div class=”First”>
Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test
</div>

<div class=”Second”> Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test
</div>

<div class=”Third”> Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test
</div>

<div class=”Fourth”> Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test
</div>

<div class=”Fifth”> Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test
</div>

<div class=”Sixth”> Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test Hello my name is Thea and this is a test
</div>
</html>

 

CSS Code:

/”css reset”/
{
padding: 0 0;
margin: 0 0;
}
h1 {
color:white;
height:200px;
background-image:url(“aaaa.jpg”)
}

h2 {
height:100px;
background-color: white;
}

body {
background-color:silver;
}

.First {
background-color: aqua;
float: left;
width:50%;
}

.Second {
background-color: fuchsia;
float: right;
width:50%;
}

.Third {
background-color:white;
float:left;
width:70%;
}

.Fourth {
background-color:yellow;
float:right;
width:30%;
}

.Fifth {
background-color:red;
float:right;
width:20%;
}

.Sixth {
background-color:blue;
float:left;
width:20%;
}

 

And this is what it looks like:

float

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s