HTML/CSS/Layout/float layout
Содержание
- 1 A float element is removed from the normal flow.
- 2 A negative margin pulls other float elements and inline content closer.
- 3 A negative margin pulls the float element to the other side of its point of alignment
- 4 A positive margin pushes other floats and inline content away from it.
- 5 A positive margin pushes the float element away from its point of alignment
- 6 Clearing Floats
- 7 This is the header
- 8 Heading One
- 8.1 float left and margin left 34%
- 8.2 Float Right - cleared right
- 8.3 Float Right - NOT cleared
- 8.4 floats and percentage width
- 8.5 Fluid Layout with float
- 8.6 A
- 8.7 B
- 8.8 C
- 8.9 height:auto is the default value and shrinkwraps the float to the height of all its child blocks or lines.
- 8.10 height sets the height of the float.
- 8.11 If the floating left block is too high
- 8.12 Left floats indent adjacent content to the right,
- 8.13 right floats indent content to the left.
- 8.14 Tag sequence and floating
- 8.15 Use height:auto, top:0, and bottom:0 to stretch an absolute element to the top and bottom of its closest positioned ancestor.
- 8.16 Use width:auto, left:0, and right:0 to stretch an absolute element to the left and right sides of its closest positioned ancestor.
- 8.17 When a float cannot fit next to another float, it moves down below it.
- 8.18 width sets the width of the float element.
- 8.19 You can float any element using float:left or float:right.
A float element is removed from the normal flow.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .container{
width: 800px; height: 800px; background: pink;
}
- .box {
float: right; overflow: auto; visibility: visible; width: 220px; height: 100px; margin: 10px; padding: 10px; background: red;
}
- .small {
float: left; width: 75px; height: auto; background: yellow;
} </style> </head> <body>
</body> </html>
</source>
A negative margin pulls other float elements and inline content closer.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .container{
width: 800px; height: 800px; background: pink;
}
- .box {
float: right; overflow: auto; visibility: visible; width: 220px; height: 100px; margin: 10px; padding: 10px; background: red;
}
- .small {
float: left; right: 200px; width: 300px; height: 300px; margin: -30px; background: yellow;
} </style> </head> <body>
this is a test. this is a test. this is a test.
</body> </html>
</source>
A negative margin pulls the float element to the other side of its point of alignment
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .container{
width: 800px; height: 800px; background: pink;
}
- .box {
float: right; overflow: auto; visibility: visible; width: 220px; height: 100px; margin: 10px; padding: 10px; background: red;
}
- .small {
float: left; right: 200px; width: 300px; height: 300px; margin: -30px; background: yellow;
} </style> </head> <body>
this is a test. this is a test. this is a test.
</body> </html>
</source>
A positive margin pushes other floats and inline content away from it.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .container{
width: 800px; height: 800px; background: pink;
}
- .box {
float: right; overflow: auto; visibility: visible; width: 220px; height: 100px; margin: 10px; padding: 10px; background: red;
}
- .small {
float: left; right: 200px; margin: 300px; background: yellow;
} </style> </head> <body>
this is a test. this is a test. this is a test.
</body> </html>
</source>
A positive margin pushes the float element away from its point of alignment
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .container{
width: 800px; height: 800px; background: pink;
}
- .box {
float: right; overflow: auto; visibility: visible; width: 220px; height: 100px; margin: 10px; padding: 10px; background: red;
}
- .small {
float: left; right: 200px; margin: 300px; background: yellow;
} </style> </head> <body>
this is a test. this is a test. this is a test.
</body> </html>
</source>
Clearing Floats
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> p,h1,h2 {
margin-bottom: 1em;
}
- left {
width: 200px; background: #aaa; height: 600px; border: 1px solid red; float: left; text-align: center;
}
- centre {
margin-left: 220px; padding-right: 50px;
} img {
float: left; padding: 10px
} h2 {
clear: both; border: 1px solid red; line-height: 30px; background: #ccc;
} </style> </head> <body>
Left Floated Column
This is the header
this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
</body> </html>
</source>
CSS: Left and right on the same line
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> .test{
background:white; border:1px solid #000; color: #000000; font-size:x-large; text-align:right; margin:20px 0; padding:10px; white-space:nowrap;
} .test span{
float:left; width:5em; text-align:left;
} </style> </head> <body>
left <img src="http://www.wbex.ru/style/logo.png" width="12" height="15" alt ="arrow image" />
left Right
</body> </html>
</source>
Float and clear
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css" media="Screen">
- .float {
margin: 0px 10px; width: 120px; background-color: yellow; color: black;
}
- .left {
float: left; background: red;
}
- .right {
float: right; background: gold;
}
- .clear-left {
clear: left; background: yellow;
}
- .clear-right {
clear: right; background: pink;
}
- .clear-both {
clear: both; background: blue; color: white;
}
- .clear-none {
clear: none; background: gray;
} </style> </head> <body>
This paragraph clears floats on its right side. Float Left Float Right
This paragraph clears floats on both sides.
</body> </html>
</source>
Float from left one by one
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>CSS Positioning Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style rel="stylesheet" type="text/css"> div {
width: 500px;
} div,h1,p {
font-family: arial, verdana, sans-serif; border: 1px solid #000000; margin: 5px;
} p {
float: left; width: 150px;
} </style> </head> <body>
Heading One
This is paragraph one. It should appear on the left.
This is paragraph two. It should appear in the middle.
This is paragraph three. It should appear on the right.
</body> </html>
</source>
float left and margin left 34%
<source lang="html4strict">
<html>
<head>
<style type="text/css" media="all">
div {
background: #aaa;
border: 5px solid black;
font-size: 200%;
padding: 1%;
}
#div1 {
float: left;
width: 30%;
}
#div2 {
margin-left: 34%;
width: auto;
}
</style>
</head>
<body>
this is a test.
this is a test. this is a test. this is a test.
</body>
</html>
</source>
Float Right - cleared right
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css" media="Screen">
- .float {
margin: 0px 10px; width: 120px; background-color: yellow; color: black;
}
- .left {
float: left; background: red;
}
- .right {
float: right; background: gold;
}
- .clear-left {
clear: left; background: yellow;
}
- .clear-right {
clear: right; background: pink;
}
- .clear-both {
clear: both; background: blue; color: white;
}
- .clear-none {
clear: none; background: gray;
} </style> </head> <body>
This paragraph does not clear floats. Float Right - cleared right </div> </body> </html> </source>
Float Right - NOT cleared
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css" media="Screen">
- .float {
margin: 0px 10px; width: 120px; background-color: yellow; color: black;
}
- .right {
float: right; background: gold;
}
- .clear-left {
clear: left; background: yellow;
}
- .clear-none {
clear: none; background: gray;
} </style> </head> <body>
<p class="clear-none">This paragraph does not clear floats.
Float Right - NOT cleared</p>
</body> </html>
</source>
floats and percentage width
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title></title>
<style type="text/css">
div#container {
margin: 0 20px;
background: lightyellow;
}
div#float {
background: lightgrey;
float: left;
border: 1px solid black;
width: 75px;
height: 50px;
}
div#follow {
margin-left: 77px;
}
table {
border: 1px solid black;
width: 100%;
}
td {
border: 1px solid black;
}
</style>
</head>
<body>
Float text.
Table text. |
</body>
</html>
</source>
Fluid Layout with float
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style type="text/css" media="Screen"> body {
max-width: 1000px; margin-left: auto; margin-right: auto;
} div {
background-color: gold; margin-right: 10px; padding: 5px; border-left: 1px solid gray; border-right: 2px solid black; border-top: 1px solid gray; border-bottom: 2px solid black;
}
- section1 {
float: left; width: 20%; min-width: 170px; background: pink;
}
- section2 {
float: left; width: 40%; min-width: 170px; background: red;
}
- section3 {
float: left; width: 20%; min-width: 170px; background: yellow;
} </style> </head> <body>
A
<p>20% of container"s width.</p>
B
<p>40% of container"s width.</p>
C
<p>20% of container"s width.</p>
</body> </html>
</source>
height:auto is the default value and shrinkwraps the float to the height of all its child blocks or lines.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .container{
width: 800px; height: 800px; background: pink;
}
- .box {
float: right; overflow: auto; visibility: visible; width: 220px; height: 100px; margin: 10px; padding: 10px; background: red;
}
- .small {
float: left; right: 200px; height: auto; background: yellow;
} </style> </head> <body>
this is a test. this is a test. this is a test.
</body> </html>
</source>
height sets the height of the float.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .container{
width: 800px; height: 800px; background: pink;
}
- .box {
float: right; overflow: auto; visibility: visible; width: 220px; height: 100px; margin: 10px; padding: 10px; background: red;
}
- .small {
float: left; right: 200px; height: 300px; background: yellow;
} </style> </head> <body>
this is a test. this is a test. this is a test.
</body> </html>
</source>
If the floating left block is too high
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<style rel="stylesheet" type="text/css">
div#container {
border: 1px solid black; margin: 0 20px; background: pink; padding: 5px;
} div#float {
text-align: center; float: left; width: 150px; height: 150px; border: 1px solid blue; background: gold;
} div.content {
background: yellow; border: 1px solid purple;
} div#clear {
border: 1px solid red; background: orange; clear: both;
}
</style> </head> <body>
Float text.
Content text.
Content text.
Content text.
Clear text.
Another div.
</body>
</html>
</source>
Left floats indent adjacent content to the right,
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .container{
width: 800px; height: 800px; background: pink;
}
- .box {
float: right; overflow: auto; visibility: visible; width: 220px; height: 100px; margin: 10px; padding: 10px; background: red;
}
- .small {
float: left; width: 75px; height: auto; background: yellow;
} </style> </head> <body>
</body> </html>
</source>
right floats indent content to the left.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .container{
width: 800px; height: 800px; background: pink;
}
- .box {
float: right; overflow: auto; visibility: visible; width: 220px; height: 100px; margin: 10px; padding: 10px; background: red;
}
- .small {
float: left; width: 75px; height: auto; background: yellow;
} </style> </head> <body>
</body> </html>
</source>
Tag sequence and floating
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title>
<style type="text/css" media="Screen">
- .floatingLeft {
float: left; max-width: 350px; margin-left: 10px; background: pink;
}
- .floatingRight {
float: right; max-width: 350px; margin-right: 10px; background: yellow;
} </style> </head> <body>
<p class="floatingLeft">Floating Layout</p> <p class="floatingRight">Postheader message 1</p> <p class="floatingLeft">Floating Layout</p> <p class="floatingRight">Postheader message 2</p>
</body> </html>
</source>
Use height:auto, top:0, and bottom:0 to stretch an absolute element to the top and bottom of its closest positioned ancestor.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .container{
position: relative; width: 800px; height: 800px; background: pink;
}
- .box {
float: right; overflow: auto; visibility: visible; width: auto; height: 100px; margin: 10px; padding: 10px; background: red;
}
- .small {
position: absolute; top: 0px; bottom: 0px; height: auto; background: yellow;
} </style> </head> <body>
this is a test. this is a test. this is a test.
</body> </html>
</source>
Use width:auto, left:0, and right:0 to stretch an absolute element to the left and right sides of its closest positioned ancestor.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .container{
width: 800px; height: 800px; background: pink;
}
- .box {
float: right; overflow: auto; visibility: visible; width: auto; height: 100px; margin: 10px; padding: 10px; background: red;
}
- .small {
left: 0px; right: 0px; width: auto; background: yellow;
} </style> </head> <body>
this is a test. this is a test. this is a test.
</body> </html>
</source>
When a float cannot fit next to another float, it moves down below it.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .container{
width: 800px; height: 800px; background: pink;
}
- .box {
float: right; overflow: auto; visibility: visible; width: 220px; height: 100px; margin: 10px; padding: 10px; background: red;
}
- .small {
float: left; right: 200px; width: 750px; height: auto; background: yellow;
} </style> </head> <body>
</body> </html>
</source>
width sets the width of the float element.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .container{
width: 800px; height: 800px; background: pink;
}
- .box {
float: right; overflow: auto; visibility: visible; width: 220px; height: 100px; margin: 10px; padding: 10px; background: red;
}
- .small {
float: left; right: 200px; width: 750px; height: auto; background: yellow;
} </style> </head> <body>
</body> </html>
</source>
You can float any element using float:left or float:right.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .container{
width: 800px; height: 800px; background: pink;
}
- .box {
float: right; overflow: auto; visibility: visible; width: 220px; height: 100px; margin: 10px; padding: 10px; background: red;
}
- .small {
float: left; width: 75px; height: auto; background: yellow;
} </style> </head> <body>
</body> </html>
</source>
