Creating Floating Boxes
Description
float property creates floating boxes, which are shifted to one side until the left
or right edge touches the edge of the containing block or another floating box.
The possible value for float is :left or right or none.
- left - shift element so that the left edge touches the left edge of the containing block or the right edge of another floating block.
- right - shift element so that the right edge touches the right edge of the containing block or the left edge of another floating block.
- none - The element is not floated.
Example
The following code shows the float property.
<!DOCTYPE HTML>
<html>
<head>
<style>
p.toggle {<!-- www . j ava 2 s . co m-->
float: left;
border: medium double black;
width: 40%;
margin: 2px;
padding: 2px;
}
</style>
</head>
<body>
<p class="toggle">This is a test.</p>
<p class="toggle">This is a test.</p>
<p>This is a test.</p>
<p>
<button>Left</button>
<button>Right</button>
<button>None</button>
</p>
<script>
var buttons = document.getElementsByTagName("BUTTON");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function(e) {
var elements = document.getElementsByClassName("toggle");
for (var j = 0; j < elements.length; j++) {
elements[j].style.cssFloat = e.target.innerHTML;
}
};
}
</script>
</body>
</html>