Css/Training/floating

• CSS Educational Materials
  • Week 4
    • Layouting
      • Floating
    • Advanced CSS
      • Inheritance
      • Priority level of selector

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>

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>

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

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