Float left and right for three columns layout in HTML and CSS
Description
The following code shows how to float left and right for three columns layout.
Example
<!--from w w w . j av a 2 s .c o m-->
<html>
<head>
<style type='text/css'>
body {
margin: 0;
padding: 8px;
}
p {
border: 1px solid black;
padding: 10px;
background: rgb(218, 218, 218);
margin: 10px;
}
p#left {
float: left;
width: 200px;
}
p#right {
float: right;
width: 200px;
}
p#center {
margin: 10px 231px;
}
</style>
</head>
<body>
<p id='left'>
This is the text of the first paragraph. This is the text of the first paragraph. This is the text of the first paragraph. This is the text of the first paragraph.
</p>
<p id='right'>
This is the text of the second paragraph. This is the text of the second paragraph. This is the text of the second paragraph. This is the text of the second paragraph.
</p>
<p id='center'>
This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph.
This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph.
This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph.
This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph.
This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph.
This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph.
This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph.
This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph.
</p>
</body>
</html>
The code above generates the following result.
HTML CSS Tutorial Float
Create columns floating left in HTML and CS...
Float div left with width and height settin...
Float left in HTML and CSS
Float right in HTML and CSS
Float right inside a container in HTML and ...
Make list item float left in HTML and CSS
Use floating elements to create columns in ...
Create columns floating left in HTML and CS...
Float div left with width and height settin...
Float left and right for three columns layo...
Float left and right with other content in ...Float left in HTML and CSS
Float right in HTML and CSS
Float right inside a container in HTML and ...
Make list item float left in HTML and CSS
Use floating elements to create columns in ...