Difference between revisions of "CSS GUIDE FLOAT"

From CDOT Wiki
Jump to: navigation, search
 
(See Also)
 
(3 intermediate revisions by the same user not shown)
Line 37: Line 37:
  
 
  <html>
 
  <html>
<head>
+
  <head>
  <style type="text/css">
+
  <style type="text/css">
  div.x{
+
     b
    position:absolute;
+
     {
    left:0px;
+
      font-size: 25px;
    top:0px;
+
      float:right;
     font-size:80px;
+
     }
     z-index:-1;
+
   </style>
  }
+
  </head>
  div.y{
+
  <body>
    position:absolute;
+
  <nowiki>
    left:0px;
+
  <p>
    top:10px;
+
    <b>HELLO!</b>
    font-size:80px;
+
    This is some text. This is some text. This is some text.
    color:red;
+
    This is some text. This is some text. This is some text.
     z-index:1;
+
    This is some text. This is some text. This is some text.
   }
+
    This is some text. This is some text. This is some text.
  </style>
+
    This is some text. This is some text. This is some text.
</head>
+
    This is some text. This is some text. This is some text.
<nowiki>
+
    This is some text. This is some text. This is some text.
<body>
+
    This is some text. This is some text. This is some text.
  <div class="x">LAYER 1</div>
+
    This is some text. This is some text. This is some text.
   <div class="y">LAYER 2</div>
+
    This is some text. This is some text. This is some text.
 +
   </p>
 +
</nowiki>
 
  </body>
 
  </body>
</nowiki>
 
 
  </html>
 
  </html>
  
Line 74: Line 75:
  
 
== See Also ==
 
== See Also ==
 
[[CSS_GUIDE_POSITION|position]]
 

Latest revision as of 17:18, 4 December 2006

This document is a work in progress and is subject to change.

Summary

Float CSS property defines the position where an image or text will be located in another element.

Syntax

float: [number]

Legal Values

Value Description
left The image or text moves to the left of the parent element
right The image or text moves to the right of the parent element
none Image or text does not move and it appears at the same location

Mozilla Recommended Values

Usage Examples

<html>
 <head>
  <style type="text/css">
   b
   {
     font-size: 25px;
     float:right;
   }
  </style>
 </head>
 <body>
 
  <p>
    <b>HELLO!</b>
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
  </p>
 
</body>
</html>

Notes

Specification Conformance

Browser Compatibility

Firefox,Netscape,Opera,IE

See Also