Floating Boxes
You can use the float property to create floating boxes. The floating elements are shifted to one side until it hits the edge of the containing block or another floating box.
The following table describes the allowed values for the float property.
| Value | Description |
|---|---|
| left | shifted so that the left edge hits the left edge of the containing block or the right edge of another floating block. |
| right | shifted so that the right edge hits the right edge of the containing block or the left edge of another floating block. |
| none | The element is not floated. |
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
p.toggle {
float:left;
border: medium double black;
width: 40%;
margin: 2px;
padding: 2px;
}
</style>
</head>
<body>
<p class="toggle">
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
</p>
<p class="toggle">
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
</p>
<p>
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
</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>