CSS/Training/floating

From Web Education Community Group
< CSS‎ | Training
Jump to: navigation, search

CSS Floating boxes

float

The float property specifies whether a box should float to the left, right, or not at all.

[Syntax]

float: left | right | none
  • left: The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top.
  • right: Similar to 'left', except the box is floated to the right, and content flows on the left side of the box, starting at the top.
  • none: The box is not floated.


Example

[style.css]

p{
  width: 100px;
  height: 100px;
  float: left;
}
p#red{
  background-color: red;
}
p#blue{
  background-color: blue;
}

[index.html]

<p id="red">This is a paragraph</p>
<p id="blue">This is a paragraph</p>

Cssed float.png

clear

This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box.

[Syntax]

clear: left | right | both | none


Example

[style.css]

p{
  width: 100px;
  height: 100px;
  float: left;
}
p#red{
  background-color: red;
}
p#blue{
  background-color: blue;
}
p#green{
  background-color: green;
  clear: left;
}

[index.html]

<p id="red">This is a paragraph</p>
<p id="blue">This is a paragraph</p>
<p id="green">This is a paragraph</p>

Cssed clear.png

See also 9.5 Floats.


Challenge

[style.css]

nav{
  float: left;
  width: 200px;
  margin-top: 30px;
}
footer{	
  height: 50px;
  clear: both;
  text-align: center;
  background-color: #999999;
}
#main{
  float: left;
  width: 400px;
  padding-left: 30px;
  margin-top: 30px;
}
aside{
  float: right;
  width: 250px;
  margin-top: 30px;
}
#main2{
  float: left;
  margin-top: 30px;
  margin-bottom: 20px;
  padding-left: 30px;
  width: 600px;
}

Cssed float chall.png


The sample site was completed in this chapter.
Let's learn the additional information of CSS by the next chapter. "Inheritance"