Cascading Style Sheets/Floating Elements

From Wikibooks, the open-content textbooks collection

Jump to: navigation, search
TODO

Editor's note
Floating is also covered at Cascading Style Sheets/Positioning
TODO

TODO
Flesh out
  • clear
  • float

Contents

[edit] Property float

TODO

TODO
Describe how to use float, before going into rendered examples.

[edit] Example 1

CSS rule:

.sidenote {
  float:left;
  width:10em;
  padding:0.5em;
  border:1px solid green;
  margin:0.5em 1em 0.2em 0
}

Sample HTML:

<p class="sidenote">This sentence is a note inserted to one side of the main text.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Example rendering:

This sentence is a note inserted to one side of the main text.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

[edit] Example 2

Multiple objects can be floated within the same block

CSS rule:

.outerBlock {
  float:left;
  width:100%;
  background-color:yellow
}
 
.shortBlock {
  float:left;
  width:30%;
  height:1em;
  margin:2px;
  background-color:red
}
 
.tallBlock {
  float:left;
  width:30%;
  height:2em;
  margin:2px;
  background-color:blue
}

Sample HTML:

<div class="outerBlock">
<div class="shortBlock"></div>
<div class="tallBlock"></div>
<div class="shortBlock"></div>
<div class="tallBlock"></div>
<div class="shortBlock"></div>
<div class="tallBlock"></div>
<div class="shortBlock"></div>
<div class="tallBlock"></div>
</div>

Example rendering:


[edit] Property clear

The property clear determines which sides of the floating element can be occupied by any of the previous floating elements. The property has no effect on next floating elements.

Possible values:

  • left
  • right
  • both
  • none

To understand the effect, compare the following examples featuring one non-floating element and two floating elements.

In the first example, the property clear is not used.

<p style="float: left; border:1px solid green;">Floating box 1.</p>
<p style="float: left; border:1px solid green;">Floating box 2.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
</p>

Floating box 1.

Floating box 2.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

In the second, example, the property clear is used in the second element to make sure no previous floating element comes to the left of it.

<p style="float: left; border:1px solid green;">Floating box 1.</p>
<p style="float: left; clear: left; border:1px solid green;">Floating box 2.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
</p>

Floating box 1.

Floating box 2.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

In the third example, the float property has no effect, as it only affects previous floating elements.

<p style="float: left; clear: both; border:1px solid green;">Floating box 1.</p>
<p style="float: left; border:1px solid green;">Floating box 2.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
</p>

Floating box 1.

Floating box 2.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

[edit] Links

A few tips:

Retrieved from "http://en.wikibooks.org/wiki/Cascading_Style_Sheets/Floating_Elements"