HTML/CSS/Layout/float and position

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

Float Divider with clear both

 
<!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>
    <h2>First Row of Floats</h2> 
    <div class="float">Float 1</div> 
    <div class="float">Float 2</div> 
    <div class="float">Float 3</div> 
    
    <div class="float-divider"></div> 
    
    <h2>Second Row of Floats</h2> 
    <div class="float">Float 4</div> 
    <div class="float">Float 5</div> 
    <div class="float">Float 6</div> 
</body>
</html>



float highlighted dimensions with multiple paragraphs

 
<!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>
      <p id="floated">
          This paragraph is floated left.
      </p>
      <p class="normal">
          The text if this paragraph is beside the floated paragraph.
      </p>
      <p class="normal">
          The text if this paragraph is beside the floated paragraph.
      </p>
        </body>
    </html>



Floating around table

 
<!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>
        <table>
            <tr>
                <td>
                    Some content.
                </td>
            </tr>
        </table>
        <div id="div1">
            This div smells funny.
        </div>
        <div id="div2">
            This div has a <em>strange</em> 
            and rather pleasing about it.
        </div>
    </body>
</html>



Floating Positioning

 
<?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>
<h1>Floating</h1>
<p><span class="pullQuote">the page.</span>
This will be at the top of the page. </p>
<p>Here is paragraph.</p>
</body>
</html>



Float-left clear-left shrunk

 
<!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>
<div class="parent" > 
    <p class="float-left clear-left shrunk">Float</p> 
</div> 
</body>
</html>



Float left shrunk

 

<!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>
<div class="parent" > 
<p class="float-left shrunk">Float</p> 
</div> 
</body>
</html>



float multiple blocks

 
<!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>
      <p>
          This is the text of the first paragraph.
      </p>
      <p>
          This is the text of the second paragraph.
      </p>
      <p>
          This is the text of the third paragraph.
      </p>
        </body>
    </html>



Float-right clear-right shrunk

 
<!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>
<div class="parent" > 
    <p class="float-right clear-right shrunk">Float</p> 
</div> 
</body>
</html>



Float right shrunk

 

<!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>
<div class="parent" > 
<p class="float-right shrunk">Float</p> 
</div> 
</body>
</html>



float with default margin padding

 
<!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>
        <p id="floated">
          This paragraph is floated left.
        </p>
        <p id="normal">
          The text of this paragraph is beside the floated paragraph.
        </p>
        </body>
    </html>



Left-retracted 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" />
<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>
<div class="parent" > 
<p class="float-right left-retracted">Left-retracted Float</p> 
</div> 
</body>
</html>



Opposing 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>
    <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>
    <h1 id="title">left</h1> 
    <div id="search"> 
        right
        
        
    </div> 
</body>
</html>



Relative 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" />
    <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>
<div class="parent"> 
  <div class="relative1 float">Relative Float 1</div> 
</div> 
</body>
</html>



Relative parent and abolute child

 
<!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>
<div class="parent"> 
  <span class="absolute">absolute</span>
</div> 
</body>
</html>



Relative parent and relative child

 
<!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>
<div class="parent"> 
  <div class="relative2 float">Relative Float 2</div> 
</div> 
</body>
</html>



Right-extended and Top-extended 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" />
<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>
<div class="parent" > 
<p class="float-right widened right-extended top-extended"> 
   Right-extended and Top-extended Float</p> 
</div> 
</body>
</html>



Right-retracted 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" />
<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>
<div class="parent" > 
<p class="float-left right-retracted">Right-retracted Float</p> 
</div> 
</body>
</html>



Sized float 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">
.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>
<div class="parent" > 
<p class="float-right sized">Sized Float</p> 
</div> 
</body>
</html>



Sized left 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" />
<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>
<div class="parent" > 
<p class="float-left sized">Sized Float</p> 

</div> 
</body>
</html>



Two childred Floating left

 
<!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>
        <div id="container">
            <div id="float">
                <p>
                    Float text.
                    Float text. Float text. Float text. Float text. 
                    Float text. Float text. Float text. Float text.
                </p>
                <p>
                    This text is chopped off! 
                    This text is chopped off! 
                </p>
            </div>
            <ul>
                <li><a href="#">Content on.</a></li>
                <li><a href="#">Content on.</a></li>
                <li><a href="#">Content off.</a></li>
                <li><a href="#">Content off.</a></li>
                <li><a href="#">Content off.</a></li>
            </ul>
        </div>
    </body>
</html>



Two Floating Sections: 25% of container"s width, 55% of container"s width minus left margin, left border, left border, and left padding

 
<!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>
<div id="nav"> 
        <h2>Navigation Section</h2> 
</div> 
<div id="main"> 
        <h2>Main Section</h2> 
</div> 
</body>
</html>



Two floats with 45% width and 5% left margin

 
<!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>
<div class="ex3"> Float1 </div> 
<div class="ex3"> Float2 </div>
<hr /> 
</body>
</html>



Two floats with 49.5% width and 5px left margin

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

<div class="ex4"> Float1 </div> 
<div class="ex4"> Float2 </div> 
</body>
</html>



Two floats with 50% width and 1px border

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

<div class="ex2"> Float1 </div> 
<div class="ex2"> Float2 </div>
</body>
</html>



Two floats with 50% width and no margins, borders, or padding

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

<div class="ex1"> Float1 </div> 
<div class="ex1"> Float2 </div>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Layout/float_and_position&oldid=5029»