HTML/CSS/Layout/float layout

Материал из Web эксперт
Перейти к: навигация, поиск

A float element is removed from the normal flow.

 
<!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>



A negative margin pulls other float elements and inline content closer.

 
<!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>



A negative margin pulls the float element to the other side of its point of alignment

 
<!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>



A positive margin pushes other floats and inline content away from it.

 
<!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>



A positive margin pushes the float element away from its point of alignment

 
<!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>



Clearing Floats

 

<!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>



CSS: Left and right on the same line

 
<!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>



Float and clear

 
<!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>



Float from left one by one

 

<!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>



float left and margin left 34%

 
<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>



Float Right - cleared right

 
<!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>



Float Right - NOT cleared

 
<!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>



floats and percentage width

 
<!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>



Fluid Layout with float

 
<!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>



height:auto is the default value and shrinkwraps the float to the height of all its child blocks or lines.

 

<!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>



height sets the height of the float.

 
<!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>



If the floating left block is too high

 

<!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>



Left floats indent adjacent content to the right,

 
<!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>



right floats indent content to the left.

 
<!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>



Tag sequence and floating

 
<!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>



Use height:auto, top:0, and bottom:0 to stretch an absolute element to the top and bottom of its closest positioned ancestor.

 

<!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>



Use width:auto, left:0, and right:0 to stretch an absolute element to the left and right sides of its closest positioned ancestor.

 

<!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>



When a float cannot fit next to another float, it moves down below it.

 
<!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>



width sets the width of the float element.

 

<!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>



You can float any element using float:left or float:right.

 
<!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>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Layout/float_layout&oldid=5039»