в 09:21, 26 мая 2010

2010-05-26T09:21:00Z

Admin: 1 версия

2010-05-26T08:16:18Z

1 версия

Новая страница

==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>
<div class="container">
<div class="small">FLOAT BEFORE</div>
<div class="box">this is a test</div>
</div>
</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>
<div class="container">
<div class="small">this is a test. <BR/>this is a test. this is a test. this is a test. </div>
<div class="box">this is a test</div>
</div>
</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>
<div class="container">
<div class="small">this is a test. <BR/>this is a test. this is a test. this is a test. </div>
<div class="box">this is a test</div>
</div>
</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>
<div class="container">
<div class="small">this is a test. <BR/>this is a test. this is a test. this is a test. </div>
<div class="box">this is a test</div>
</div>
</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>
<div class="container">
<div class="small">this is a test. <BR/>this is a test. this is a test. this is a test. </div>
<div class="box">this is a test</div>
</div>
</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>
<div id="left">
<p>Left Floated Column</p>
</div>
<div id="centre">
<h1>This is the header</h1>
<h2>this is a test. this is a test. this is a test. </h2>
<p>this is a test. this is a test. this is a test. this is a test. </p>
</div>
</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>
<p class="test"><span>left </span><img src="http://www.wbex.ru/style/logo.png" width="12" height="15" alt ="arrow image" /></p>
<p class="test"><span>left </span>Right</p>
</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>
<div>
<p class="clear-right">This paragraph clears floats on its right side.
<span class="float left clear-left">Float Left </span>
<span class="float right clear-right">Float Right</span></p>
<p class="clear-both">This paragraph clears floats on both sides.</p>
</div>
</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>
<div id="page">
<h1>Heading One</h1>
<p>This is paragraph one. It should appear on the left.</p>
<p>This is paragraph two. It should appear in the middle.</p>
<p>This is paragraph three. It should appear on the right.</p>
</div>
</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>
<div id="div1">
this is a test.
</div>
<div id="div2">
this is a test. <em>this is a test. </em>this is a test.
</div>
</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>
<div>
<p class="clear-none">This paragraph does not clear floats.

<span class="float right clear-right">Float Right - cleared right</span>
</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>
<div>
<p class="clear-none">This paragraph does not clear floats.
<span class="float right clear-none" >Float Right - NOT cleared</span></p>
</div>
</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>
<div id="container">
<div id="float">
Float text.
</div>
<div id="follow">
<table>
<tr>
<td>
Table text.
</td>
</tr>
</table>
</div>
</div>
</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>
<div id="section1">
<h2>A</h2>
<p>20% of container"s width.</p>
</div>
<div id="section2">
<h2>B</h2>
<p>40% of container"s width.</p>
</div>
<div id="section3">
<h2>C</h2>
<p>20% of container"s width.</p>
</div>
</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>
<div class="container">
<div class="small">this is a test. <BR/>this is a test. this is a test. this is a test. </div>
<div class="box">this is a test</div>
</div>
</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>
<div class="container">
<div class="small">this is a test. <BR/>this is a test. this is a test. this is a test. </div>
<div class="box">this is a test</div>
</div>
</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>
<div id="container">
<div id="float">
Float text.
</div>
<div class="content">
Content text.
</div>
<div class="content">
Content text.
</div>
<div class="content">
Content text.
</div>
<div id="clear">
Clear text.
</div>
<div>
Another div.
</div>
</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>
<div class="container">
<div class="small">FLOAT BEFORE</div>
<div class="box">this is a test</div>
</div>
</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>
<div class="container">
<div class="small">FLOAT BEFORE</div>
<div class="box">this is a test</div>
</div>
</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>
<div id="postheader">
<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>
</div>
</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>
<div class="container">
<div class="small">this is a test. <BR/>this is a test. this is a test. this is a test. </div>
<div class="box">this is a test</div>
</div>
</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>
<div class="container">
<div class="small">this is a test. <BR/>this is a test. this is a test. this is a test. </div>
<div class="box">this is a test</div>
</div>
</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>
<div class="container">
<div class="small">FLOAT BEFORE</div>
<div class="box">this is a test</div>
</div>
</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>
<div class="container">
<div class="small">FLOAT BEFORE</div>
<div class="box">this is a test</div>
</div>
</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>
<div class="container">
<div class="small">FLOAT BEFORE</div>
<div class="box">this is a test</div>
</div>
</body>
</html>
</source>

← Предыдущая	Версия 09:21, 26 мая 2010
(нет различий)

HTML/CSS/Layout/float layout - История изменений

в 09:21, 26 мая 2010

Admin: 1 версия