HTML/CSS/Layout/float and position
Содержание
- 1 Float Divider with clear both
- 2 First Row of Floats
- 3 Second Row of Floats
- 4 float highlighted dimensions with multiple paragraphs
- 5 Floating around table
- 6 Floating Positioning
- 7 Floating
- 8 left
- 8.1 Relative Float
- 8.2 Relative parent and abolute child
- 8.3 Relative parent and relative child
- 8.4 Right-extended and Top-extended Float
- 8.5 Right-retracted Float
- 8.6 Sized float right
- 8.7 Sized left float
- 8.8 Two childred Floating left
- 8.9 Two Floating Sections: 25% of container"s width, 55% of container"s width minus left margin, left border, left border, and left padding
- 8.10 Navigation Section
- 8.11 Main Section
- 8.12 Two floats with 45% width and 5% left margin
- 8.13 Two floats with 49.5% width and 5px left margin
- 8.14 Two floats with 50% width and 1px border
- 8.15 Two floats with 50% width and no margins, borders, or padding
Float Divider with clear both
<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 {
float: left; background: red;
}
- .float-divider {
clear: both; height: 20px; margin-bottom: 20px; border-bottom: 5px solid black; font-size: 1px; line-height: 1px; background: pink;
} </style> </head> <body>
First Row of Floats
Second Row of Floats
</body> </html>
</source>
float highlighted dimensions with multiple paragraphs
<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"> p#floated { float: left; border: 1px solid black; padding: 10px; width: 100px; background: gold; margin: 10px; } p.normal { border: 1px solid black; background: red; } </style> </head> <body>
This paragraph is floated left.
The text if this paragraph is beside the floated paragraph.
The text if this paragraph is beside the floated paragraph.
</body> </html> </source>
Floating around table
<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> Doctype Sniffing </title> <style type="text/css" media="all"> table { margin: auto; } td { background: red; margin: 10%; border: 5px solid black; padding: 10%; width: 100%; color: black; font-size: 200%; text-align: center; } div { background: green; border: 5px solid black; font-size: 200%; padding: 1%; } #div1 { float: left; width: 30%; } #div2 { margin-left: 34%; width: auto; } </style> </head> <body>
Some content. |
This div smells funny.
This div has a strange and rather pleasing about it.
</body>
</html>
</source>
Floating Positioning
<source lang="html4strict">
<?xml version="1.0" ?> <!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" lang="en" xml:lang="en"> <head>
<title>Floating Positioning</title> <style rel="stylesheet" type="text/css">
body {
color: #000000; background-color: #ffffff; font-family: arial, verdana, sans-serif; font-size: 12px; margin: 10px; border-style: solid; border-width: 1px; border-color: #000000;
} p {
border-style: solid; border-color: #000000; border-width: 2px; padding: 5px; background-color: #FFFFFF; width: 500px;
} .pullQuote {
float: right; border-style: solid; border-width: 1px; padding: 5px; margin: 5px; width: 150px;
} </style> </head> <body>
Floating
the page. This will be at the top of the page.
Here is paragraph.
</body> </html>
</source>
Float-left clear-left shrunk
<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"> .parent{
width: 800px; height: 800px; background: black;
}
- .float-left {
float: left; background: gold;
}
- .clear-left {
clear: left; background: yellow;
}
- .shrunk {
margin: 3px; padding: 1px; background-color: pink;
} </style> </head> <body>
Float
</body> </html>
</source>
Float left shrunk
<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"> .parent{
width: 800px; height: 800px; background: black;
}
- .shrunk {
margin: 3px; padding: 1px; background-color: yellow;
}
- .float-left {
float: left; background: gold;
} </style> </head> <body>
Float
</body> </html>
</source>
float multiple blocks
<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"> p { float: left; border: 1px solid black; padding: 10px; background: pink; margin: 10px; } </style> </head> <body>
This is the text of the first paragraph.
This is the text of the second paragraph.
This is the text of the third paragraph.
</body> </html> </source>
Float-right clear-right shrunk
<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"> .parent{
width: 800px; height: 800px; background: black;
}
- .clear-right {
clear: right; background: purple;
}
- .shrunk {
margin: 3px; padding: 1px; background-color: yellow;
} </style> </head> <body>
Float
</body> </html>
</source>
Float right shrunk
<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"> .parent{
width: 800px; height: 800px; background: black;
}
- .float-right {
float: right; background: pink;
}
- .shrunk {
margin: 3px; padding: 1px; background-color: yellow;
} </style> </head> <body>
Float
</body> </html>
</source>
float with default margin padding
<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"> body { margin: 0; padding: 8px; } p#floated { float: left; } p { border: thin solid black; } </style> </head> <body>
This paragraph is floated left.
The text of this paragraph is beside the floated paragraph.
</body> </html> </source>
Left-retracted 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" /> <title></title> <style type="text/css" media="Screen"> .parent{
width: 800px; height: 800px; background: black;
}
- .float-right {
float: right; background: pink;
}
- .left-retracted {
margin-left: -185px; background: blue; color: white;
} </style> </head> <body>
Left-retracted Float
</body> </html>
</source>
Opposing 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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title>
<style type="text/css" media="Screen">
- title {
float: left; min-width: 280px; max-width: 350px; margin-left: 0; background: pink;
}
- search {
float: right; min-width: 280px; max-width: 350px; margin-right: 0; background:red;
} </style> </head> <body>
left
right
</body> </html>
</source>
Relative 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" /> <title></title> <style type="text/css" media="Screen">
- .parent {
position: relative; padding: 20px; background: red;
}
- .relative1 {
position: relative; z-index: 3; top: 10px; left: 10px; background: pink;
}
- .float {
float: left; width: 100px; height: 50px; margin-right: 25px; margin-bottom: 40px; background: yellow;
} </style> </head> <body>
</body> </html>
</source>
Relative parent and abolute child
<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">
- .parent {
position: relative; padding: 20px; background: red;
}
- .relative2 {
position: relative; z-index: 2; top: 20px; left: -30px; background: gold;
}
- .absolute {
position: absolute; z-index: 1; top: 102px; left: 215px; background: gray;
} </style> </head> <body>
absolute
</body> </html>
</source>
Relative parent and relative child
<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">
- .parent {
position: relative; padding: 20px; background: red;
}
- .relative2 {
position: relative; z-index: 2; top: 20px; left: -30px; background: gold;
}
- .float {
float: left; width: 100px; height: 50px; margin-right: 25px; margin-bottom: 40px; background: yellow;
} </style> </head> <body>
</body> </html>
</source>
Right-extended and Top-extended 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" /> <title></title> <style type="text/css" media="Screen"> .parent{
width: 800px; height: 800px; background: black;
}
- .float-right {
float: right; background: yellow;
}
- .widened {
width: 175px; background: gold;
}
- .top-extended {
margin-top: 20px; background: purple;
}
- .right-extended {
margin-right: 120px; background: pink;
} </style> </head> <body>
Right-extended and Top-extended Float
</body> </html>
</source>
Right-retracted 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" /> <title></title> <style type="text/css" media="Screen"> .parent{
width: 800px; height: 800px; background: black;
}
- .right-retracted {
margin-right: -55px; background: gray;
}
- .float-left {
float: left; background: gold;
} </style> </head> <body>
Right-retracted Float
</body> </html>
</source>
Sized float 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"> .parent{
width: 800px; height: 800px; background: black;
}
- .sized {
width: 70px; height: 60px; margin: 10px; background: red;
}
- .float-right {
float: right; background: pink;
} </style> </head> <body>
Sized Float
</body> </html>
</source>
Sized left 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" /> <title></title> <style type="text/css" media="Screen"> .parent{
width: 800px; height: 800px; background: black;
}
- .sized {
width: 70px; height: 60px; margin: 10px; background: red;
}
- .float-left {
float: left; background: gold;
} </style> </head> <body>
Sized Float
</body> </html>
</source>
Two childred Floating 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>
<head> <title></title> <style type="text/css"> div#container { border: thick dotted black; margin: 0 20px; background: lightyellow; } div#float { background: lightgrey; float: left; border: 1px solid black; width: 150px; height: 150px; } ul { margin: 0; list-style: none; } </style> </head> <body>
Float text. Float text. Float text. Float text. Float text. Float text. Float text. Float text. Float text.
This text is chopped off! This text is chopped off!
- <a href="#">Content on.</a>
- <a href="#">Content on.</a>
- <a href="#">Content off.</a>
- <a href="#">Content off.</a>
- <a href="#">Content off.</a>
</body>
</html>
</source>
Two Floating Sections: 25% of container"s width, 55% of container"s width minus left margin, left border, left border, and left padding
<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">
- nav {
float: left; width: 25%; background: yellow; min-height: 150px; margin: 0; padding: 5px;
}
- main {
float: left; width: 55%; min-width: 170px; min-height: 150px; margin-left: 80px; padding: 5px; padding-left: 80px; background: red;
} </style> </head> <body>
Main Section
</body> </html>
</source>
Two floats with 45% width and 5% left margin
<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"> body {
max-width: 800px;
} div {
min-width: 100px;
}
- .ex3 {
float: left; width: 45%; margin-left: 5%; background: yellow;
}
</style> </head> <body>
</body> </html>
</source>
Two floats with 49.5% width and 5px left margin
<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"> body {
max-width: 800px;
} div {
min-width: 100px;
}
- .ex4 {
float: left; width: 49.5%; margin-left: 5px; background: red;
}
</style> </head> <body>
</body> </html>
</source>
Two floats with 50% width and 1px border
<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"> body {
max-width: 800px;
} div {
min-width: 100px;
}
- .ex2 {
float: left; width: 50%; border: 1px solid; background: blue;
}
</style> </head> <body>
</body> </html>
</source>
Two floats with 50% width and no margins, borders, or padding
<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"> body {
max-width: 800px;
} div {
min-width: 100px;
}
- .ex1 {
float: left; width: 50%; background: menu;
}
</style> </head> <body>
</body> </html>
</source>