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:
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:
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.