HTML/CSS/Layout/float and position

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

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

Float 1
Float 2
Float 3

Second Row of Floats

Float 4
Float 5
Float 6

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

  1. title {
 float: left;
 min-width: 280px;
 max-width: 350px;
 margin-left: 0;
 background: pink;

}

  1. search {
 float: right;
 min-width: 280px;
 max-width: 350px;
 margin-right: 0;
 background:red;

} </style> </head> <body>

left

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

Relative Float 1

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

Relative Float 2

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

  1. nav {
 float: left;
 width: 25%;
 background: yellow;
 min-height: 150px;
 margin: 0;
 padding: 5px;

}

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

Float1
Float2

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

Float1
Float2

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

Float1
Float2

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

Float1
Float2

</body> </html> 

</source>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Layout/float_and_position&oldid=5029»