Advanced Box properties

In addition to setting borders and spacing, there are properties for sizing and positioning blocks of code within the displayed page.

Simple sizing properties such as 'width' and 'height' are self explanatory but the positioning properties are more complex.

Float

The float property allows you to specify position of an element and the consequent wrapping of subsequent elements around it. The possible values for float are left, right and none. Specifying float: left means the element will be position to the left and that subsequent elements will wrap around the right hand side of the element. For example, the XHTML fragment:

<img src="images/GreenStone.gif" alt="Green Stone" />
<p> This text will wrap alongside the image, and then 
    continue underneath once it reaches the bottom. This
    paragraph is only here to demonstrate this concept.</p>

formatted with the following: style:

img { float: right; }

will give the following effect:  

Green Stone

This text will wrap alongside the image, and then continue underneath once it reaches the bottom. This paragraph is only here to demonstrate this concept.

This technique is useful for laying out sections of a page identified by <div> containers. Two <div>s can be made to sit side by side, for example to make a menu sit alongside the main content of the page. This avoids the use of tables for page layout.

Clear

You may want to allow wrapping around an object but at some point move clear of the floated object and start afresh. The clear property allows you to select 'left', 'right' or 'both' to allow a subsequent element to move below the floated objects. For example, the following XHTML fragment:

<img src="GreenStone.gif" alt="Green Stone" />
<p> This text will wrap alongside the image, and then 
    continue underneath if it reaches the bottom.</p>
<p class="moveclear">
    However this paragraph needs to move clear
    of the floated image.</p>

formatted with the following: style:

img { float: right; }
.moveclear { clear: right; }

will give the following effect:

Green Stone

This text will wrap alongside the image, and then continue underneath if it reaches the bottom.

However this paragraph needs to move clear of the floated image.

Valid XHTML 1.0! | Valid CSS! | WCAG Approved AA
Page design by: John P Scott - Hosting with: Netcetera