You can control if an element allows floated elements to its sides with the clear property
clear: value;
Values:
Now, what does all that mean?
This is the default setting, floated elements can appear on either side of the element set to clear: none;
Setting the value to both, causes no floated elements to appear on either side of the element set to clear: both;
Setting the value to left, causes no floated elements to appear to the left side of the element set to clear: left;
Setting the value to right, causes no floated elements to appear to the right side of the element set to clear: right;
You can control how much of an element is visible with the clip property
clip: value;
Values:
Currently the only shape recognized by the clip property is rect (rectangle)
clip: rect(10px, 10px, 10px, 10px);
You can control the style of cursor to be used in an element with the cursor property
cursor: value;
Values:
If you choose to use a custom cursor, it is always a good idea to declare a generic one after the custom value.
cursor: url("image.cur"), default;
You can control how an element is displayed with the display property
display: value;
Values:
Now, what does all that mean?
Creates a line break before and after the element
No line break is created
Creates a line break before and after the element and adds a list item marker
Makes an element not display on the page
The float property changes how text and or images within an element are displayed
float: value;
Values:
Now, what does all that mean?
The image/text is displayed to the left of the parent element
The image/text is displayed to the right of the parent element
There is no change in the way the image/text is displayed
You can control what an elements contents will do if it overflows it boundaries with the overflow property
overflow: value;
Values:
As you can see, with this property you can mimic an iframe. This box is set to an overflow value of "auto". Meaning that if the contents of the element break the boundaries it should add a scrollbar.
If it we're set to an overflow value of "scroll", horizontal and vertical scrollbars would appear no matter what.
If it we're set to an overflow value of "hidden", the contents would be clipped at the boundary and no scrollbar would appear.
If it we're set to an overflow value of "visible", the contents would expand past the boundaries and no scrollbar would appear.
Here is what I have in my CSS file.
#overflow_box {width:200px; height:200px; border-top: 1px solid #eee; border-left: 1px solid #eee; border-bottom: 1px solid #eee; padding: 10px; overflow: auto;}
Then in the (X)HTML file I have this:
<div id="overflow_box">Contents</div>
You can control if an element is visible or not with the visibility property
visibility: value;
Values:
You can control the layer order of positioned elements with the z-index property
z-index: value;
Values:
The higher the number the higher the level. Negative numbers are allowed
Previous Chapter: Chapter 15 - CSS Width and Height
Next Chapter: Chapter 17 - CSS Position